Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization

0
votes

I am trying to create a dual axis gantt chart and line chart to display tasks on the left axis (gantt chart data) and numeric values on the right axis (line chart data). I want to use Google Charts, HighCharts, or chartJs for the visualization and don't know which one can pull this off, see the link/picture attached to the question for the visual I am trying to get close to. I can display each chart individually but not together as a combined, dual axis chart. I have tried all sorts of the combination chart configuration but nothing comes close to working. Any help on this would be appreciated.

Here are links to Google Charts, HighCharts combo chart and gantt chart demos:

https://developers.google.com/chart/interactive/docs/gallery/ganttchart

https://www.highcharts.com/demo/combo-multi-axes

https://www.highcharts.com/gantt/demo

enter image description here

1
highchartschart.jsgantt-chartgoogle-visualization

1 Answers

1
votes

That type of chart can be easily created using Highcharts. You can use line and xrange series types with two yAxis:

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },
    yAxis: [{
        categories: [...],
    }, {
        opposite: true
    }],
    series: [{
        type: 'xrange',
        data: [...]
        }
    }, {
        type: 'line',
        yAxis: 1,
        data: [...]
    }]
});

Live demo: https://jsfiddle.net/BlackLabel/zv74tsoq/

API Reference: https://api.highcharts.com/highcharts/yAxis