A group of groups on the x-axis for charting

[chriswillis]

I have charts that have 2 dimensions on the x-axis. I previously did this with hacking of D3 by using JS and manipulating the SVGs to make more than 1 chart sort of behave like one chart. I would prefer a better solution in the new charting system that we are building.




The code I see from the HC docs is like so:

Code: Select all

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            ['Jan', '2020'],
            ['Feb', '2020']
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [[49.9, 2020], [71.5, 2020]]

    }, {
        name: 'New York',
        data: [[83.6, 2020], [78.8, 2020]]

    }]
});

I hope there is a way this can be done.

[dominik.c]

Hello chriswillis!

Welcome to our forum and thanks for contacting us with your question!

So basically you want to copy the series but with a different x coordinate (year), right? I'm not sure if I understand you correctly. I've prepared a demo that represents your image.

Demo:
https://jsfiddle.net/BlackLabel/mwrygsob/

If it does not meet your expectations please describe your requirements more precisely.

Best regards!