Hybrid line and Gantt chart
This demo shows how we can use stacked axes to create a combined chart with a Line series and Column (Gantt) series sharing the same X axis.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");root.dateFormatter.setAll({ dateFormat: "yyyy-MM-dd HH:mm", dateFields: ["valueX", "openValueX"]});
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }));
// Add legend// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/var legend = chart.children.push( am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }));
// Shared X axisvar xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "minute", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}) }));
// Stack Y axeschart.leftAxesContainer.set("layout", root.verticalLayout);
// Line chart partvar data1 = [ { value: 120, date: "2018-01-01 08:00" }, { value: 100, date: "2018-01-01 09:00" }, { value: 68, date: "2018-01-01 10:00" }, { value: 99, date: "2018-01-01 11:00" }, { value: 172, date: "2018-01-01 12:00" }, { value: 120, date: "2018-01-01 13:00" }, { value: 99, date: "2018-01-01 14:00" }, { value: 120, date: "2018-01-01 15:00" }, { value: 100, date: "2018-01-01 16:00" }, { value: 68, date: "2018-01-01 17:00" }, { value: 99, date: "2018-01-01 18:00" }, { value: 172, date: "2018-01-01 19:00" }, { value: 120, date: "2018-01-01 20:00" }, { value: 99, date: "2018-01-01 21:00" }, { value: 120, date: "2018-01-01 22:00" }, { value: 99, date: "2018-01-01 23:00" }, { value: 120, date: "2018-01-02 00:00" }];
var yAxis1 = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, { inversed: true }), x: am5.percent(100), centerX: am5.percent(100), paddingRight: 20, tooltip: am5.Tooltip.new(root, { themeTags: ["axis"], animationDuration: 200 }) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series1 = chart.series.push( am5xy.LineSeries.new(root, { xAxis: xAxis, yAxis: yAxis1, valueXField: "date", valueYField: "value" }));
series1.data.processor = am5.DataProcessor.new(root, { dateFields: ["date"], dateFormat: "yyyy-MM-dd HH:mm"});
series1.data.setAll(data1);
// Gantt chart partvar colors = chart.get("colors");
// Datavar data2 = [ { category: "John", fromDate: "2018-01-01 08:00", toDate: "2018-01-01 10:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(0), 0) } },
{ category: "John", fromDate: "2018-01-01 12:00", toDate: "2018-01-01 15:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(0), 0.4) } },
{ category: "John", fromDate: "2018-01-01 15:30", toDate: "2018-01-01 21:30", columnSettings: { fill: am5.Color.brighten(colors.getIndex(0), 0.8) } },
{ category: "Jane", fromDate: "2018-01-01 09:00", toDate: "2018-01-01 12:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(2), 0) } },
{ category: "Jane", fromDate: "2018-01-01 13:00", toDate: "2018-01-01 17:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(2), 0.4) } },
{ category: "Peter", fromDate: "2018-01-01 11:00", toDate: "2018-01-01 16:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(4), 0) } },
{ category: "Peter", fromDate: "2018-01-01 16:00", toDate: "2018-01-01 19:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(4), 0.4) } },
{ category: "Katie", fromDate: "2018-01-01 16:00", toDate: "2018-01-01 20:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(6), 0) } },
{ category: "Katie", fromDate: "2018-01-01 20:30", toDate: "2018-01-02 00:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(6), 0.4) } },
{ category: "Michael", fromDate: "2018-01-01 13:00", toDate: "2018-01-02 00:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(8), 0) } }];
var yAxis2 = chart.yAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "category", renderer: am5xy.AxisRendererY.new(root, { inversed: true }), paddingRight: 20, marginTop: 50, x: am5.percent(100), centerX: am5.percent(100), tooltip: am5.Tooltip.new(root, { themeTags: ["axis"], animationDuration: 200 }) }));
yAxis2.data.setAll([ { category: "John" }, { category: "Jane" }, { category: "Peter" }, { category: "Katie" }, { category: "Michael" }]);
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series2 = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis2, openValueXField: "fromDate", valueXField: "toDate", categoryYField: "category", sequencedInterpolation: true }));
series2.columns.template.setAll({ templateField: "columnSettings", strokeOpacity: 0, tooltipText: "{category}: {openValueX} - {valueX}"});
series2.data.processor = am5.DataProcessor.new(root, { dateFields: ["fromDate", "toDate"], dateFormat: "yyyy-MM-dd HH:mm"});
series2.data.setAll(data2);
// Add scrollbarschart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series1.appear();series2.appear();chart.appear(1000, 100);<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 95vh;}{ "type": "XYChart", "settings": { "panX": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "layout": { "type": "VerticalLayout" }, "scrollbarX": { "type": "Scrollbar", "settings": { "orientation": "horizontal" } } }, "properties": { "series": [ "#series-0", "#series-1" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1", "#axis-2" ], "leftAxesContainer": { "settings": { "layout": { "type": "VerticalLayout" } } } }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 } }, "properties": { "data": [] } } ], "refs": [ { "data-0": [ { "value": 120, "date": 1514786400000 }, { "value": 100, "date": 1514790000000 }, { "value": 68, "date": 1514793600000 }, { "value": 99, "date": 1514797200000 }, { "value": 172, "date": 1514800800000 }, { "value": 120, "date": 1514804400000 }, { "value": 99, "date": 1514808000000 }, { "value": 120, "date": 1514811600000 }, { "value": 100, "date": 1514815200000 }, { "value": 68, "date": 1514818800000 }, { "value": 99, "date": 1514822400000 }, { "value": 172, "date": 1514826000000 }, { "value": 120, "date": 1514829600000 }, { "value": 99, "date": 1514833200000 }, { "value": 120, "date": 1514836800000 }, { "value": 99, "date": 1514840400000 }, { "value": 120, "date": 1514844000000 } ] }, { "data-1": [ { "category": "John", "fromDate": 1514786400000, "toDate": 1514793600000, "columnSettings": { "fill": { "type": "Color", "value": "#67b7dc" }, "__parse": true }, "__parse": true }, { "category": "John", "fromDate": 1514800800000, "toDate": 1514811600000, "columnSettings": { "fill": { "type": "Color", "value": "#75c5ea" }, "__parse": true }, "__parse": true }, { "category": "John", "fromDate": 1514813400000, "toDate": 1514835000000, "columnSettings": { "fill": { "type": "Color", "value": "#83d3f8" }, "__parse": true }, "__parse": true }, { "category": "Jane", "fromDate": 1514790000000, "toDate": 1514800800000, "columnSettings": { "fill": { "type": "Color", "value": "#6771dc" }, "__parse": true }, "__parse": true }, { "category": "Jane", "fromDate": 1514804400000, "toDate": 1514818800000, "columnSettings": { "fill": { "type": "Color", "value": "#757fea" }, "__parse": true }, "__parse": true }, { "category": "Peter", "fromDate": 1514797200000, "toDate": 1514815200000, "columnSettings": { "fill": { "type": "Color", "value": "#a367dc" }, "__parse": true }, "__parse": true }, { "category": "Peter", "fromDate": 1514815200000, "toDate": 1514826000000, "columnSettings": { "fill": { "type": "Color", "value": "#b175ea" }, "__parse": true }, "__parse": true }, { "category": "Katie", "fromDate": 1514815200000, "toDate": 1514829600000, "columnSettings": { "fill": { "type": "Color", "value": "#dc67ce" }, "__parse": true }, "__parse": true }, { "category": "Katie", "fromDate": 1514831400000, "toDate": 1514844000000, "columnSettings": { "fill": { "type": "Color", "value": "#ea75dc" }, "__parse": true }, "__parse": true }, { "category": "Michael", "fromDate": 1514804400000, "toDate": 1514844000000, "columnSettings": { "fill": { "type": "Color", "value": "#dc6788" }, "__parse": true }, "__parse": true } ] }, { "data-2": [ { "category": "John" }, { "category": "Jane" }, { "category": "Peter" }, { "category": "Katie" }, { "category": "Michael" } ] }, { "axis-0": { "type": "DateAxis", "settings": { "baseInterval": { "timeUnit": "minute", "count": 1 }, "renderer": { "type": "AxisRendererX" } } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererY", "settings": { "inversed": true } }, "x": { "type": "Percent", "value": 100 }, "centerX": { "type": "Percent", "value": 100 }, "paddingRight": 20, "tooltip": { "type": "Tooltip", "settings": { "themeTags": [ "axis" ], "animationDuration": 200 } } } } }, { "axis-2": { "type": "CategoryAxis", "settings": { "categoryField": "category", "renderer": { "type": "AxisRendererY", "settings": { "inversed": true } }, "paddingRight": 20, "marginTop": 50, "x": { "type": "Percent", "value": 100 }, "centerX": { "type": "Percent", "value": 100 }, "tooltip": { "type": "Tooltip", "settings": { "themeTags": [ "axis" ], "animationDuration": 200 } } }, "properties": { "data": "#data-2" } } }, { "series-0": { "type": "LineSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "valueXField": "date", "valueYField": "value" }, "properties": { "data": "#data-0" } } }, { "series-1": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-2", "openValueXField": "fromDate", "valueXField": "toDate", "categoryYField": "category", "sequencedInterpolation": true }, "properties": { "data": "#data-1", "columns": { "properties": { "template": { "settings": { "templateField": "columnSettings", "strokeOpacity": 0, "tooltipText": "{category}: {openValueX} - {valueX}" } } } } } } } ], "root": { "properties": { "dateFormatter": { "settings": { "dateFormat": "yyyy-MM-dd HH:mm", "dateFields": [ "valueX", "openValueX" ] } } } }}hybrid-line-and-gantt-chart