Combining Highcharts Gauge with Area Chart

Question

I'm looking to combine a highcharts gauge with a non-polar chart such as area. I've created two seperate sets of x- and y-axis, and two panes, and assigned them to the relevant series.

pane: [undefined,
  {
    startAngle: -90,
    endAngle: 90,
    background: null,
    size: "50%",
    center: ["80%", "75%"]
  }
],
xAxis: [{
    type: "datetime",
    pane: 0
  },
  {
    pane: 1
  }
],
yAxis: [{
    title: {
      text: "Views"
    },
    min: 0,
    pane: 0,
    type: "linear"
  },
  {
    pane: 1,
    labels: {
      enabled: false
    },
    tickPositions: [],
    minorTickLength: 0,
    min: -10,
    max: 10,
    plotBands: [{
      from: -10,
      to: 3,
      color: 'rgb(192, 0, 0)', // red
      thickness: '50%'
    }, {
      from: 3,
      to: 5,
      color: 'rgb(255, 192, 0)', // yellow
      thickness: '50%'
    }, {
      from: 5,
      to: 10,
      color: 'rgb(155, 187, 89)', // green
      thickness: '50%'
    }]
  }
]

Unfortunately, it feels like the chart.polar setting applies exclusively on a chart level, rather than by series. This causes the chart to either be polar for all panes and axis, showing the gauge properly but the area wrongly, or not polar, properly showing the area but not the gauge.

Is there a way to combine a gauge (or any highcharts polar chart for that matter) and a non-polar highcharts chart such as area in a single chart? Or am I stuck creating two charts and overlapping the divs?

JSFiddle with gauge active, generates 2 gauges from the data: https://jsfiddle.net/stefaniev/jbx6cwLz/12/

series: [{
    name: "Series 1",
    data: [....],
    type: "area",
    "color": "rgba(240,240,240,0.01)",
    "pointStart": 1542153600000,
    "pointInterval": 900000,
    yAxis: 0,
    xAxis: 0
  },
  {
    "name": "Series 2",
    "data": [....],
    "type": "area",
    "color": "#09C98D",
    "pointStart": 1542153600000,
    "pointInterval": 900000,
    yAxis: 0,
    xAxis: 0
  },
  {
    type: 'gauge',
    name: 'Doing poorly',
    yAxis: 1,
    xAxis: 1,
    data: [-3]
  }
]

Same JSFiddle but with gauge series commented out, the area chart renders properly: https://jsfiddle.net/stefaniev/jbx6cwLz/13/

series: [{
    name: "Series 1",
    data: [....],
    type: "area",
    "color": "rgba(240,240,240,0.01)",
    "pointStart": 1542153600000,
    "pointInterval": 900000,
    yAxis: 0,
    xAxis: 0
  },
  {
    "name": "Series 2",
    "data": [....],
    "type": "area",
    "color": "#09C98D",
    "pointStart": 1542153600000,
    "pointInterval": 900000,
    yAxis: 0,
    xAxis: 0
  },
 /* {
    type: 'gauge',
    name: 'Doing poorly',
    yAxis: 1,
    xAxis: 1,
    data: [-3]
  }*/
]

Any help or tips would be appreciated!

user_8951377 · Answer

...

Unfortunately, it feels like the chart.polar setting applies exclusively on a chart level, rather than by series(...)

Yes, you are right. In the same chart, you can not use polar and other chart types. Below you can find an example how to create these types of charts in separate containers:

Highcharts.chart('container1', {
    series: [{
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }]
});

Highcharts.chart('container2', {
    chart: {
        type: 'gauge',
        height: 200,
        width: 200,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    yAxis: {
        min: 0,
        max: 200
    },
    pane: {
        startAngle: -150,
        endAngle: 150
    },
    series: [{
        data: [110]
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/n54k3cpL/

Combining Highcharts Gauge with Area Chart

1 Answers