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!

I am afraid you will have to use two charts. Setting the chart type to polar changes how the chart is built, not just the series but the axis, grids, and so on. The only other option I can think of is to draw the gauge parts you are interested in using SVGs. — ewolden

ppotaczek ppotaczek · Accepted Answer · 2018-11-16T14:48:36

...

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