Gantt chart with columns that span multiple categories
This demo shows how we can use additional hidden Y axes and column series, to add floating columns that span multiple categories on a Gantt chart.
/** * --------------------------------------- * 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", 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 }));
var colors = chart.get("colors");
// Datavar data = [ { 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: "Melania", fromDate: "2018-01-01 16:00", toDate: "2018-01-01 20:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(6), 0) } },
{ category: "Melania", fromDate: "2018-01-01 20:30", toDate: "2018-01-02 00:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(6), 0.4) } },
{ category: "Donald", fromDate: "2018-01-01 13:00", toDate: "2018-01-02 00:00", columnSettings: { fill: am5.Color.brighten(colors.getIndex(8), 0) } }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var yAxis = chart.yAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "category", renderer: am5xy.AxisRendererY.new(root, { inversed: true, cellStartLocation: 0.2, cellEndLocation: 0.8 }),
tooltip: am5.Tooltip.new(root, { themeTags: ["axis"], animationDuration: 200 }) }));
yAxis.data.setAll([ { category: "John" }, { category: "Jane" }, { category: "Peter" }, { category: "Melania" }, { category: "Donald" }]);
var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "minute", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, openValueXField: "fromDate", valueXField: "toDate", categoryYField: "category", sequencedInterpolation: true }));
series.columns.template.setAll({ height: am5.p100, templateField: "columnSettings", strokeOpacity: 0, tooltipText: "{category}: {openValueX.formatDate('yyyy-MM-dd HH:mm')} - {valueX.formatDate('yyyy-MM-dd HH:mm')}"});
series.data.processor = am5.DataProcessor.new(root, { dateFields: ["fromDate", "toDate"], dateFormat: "yyyy-MM-dd HH:mm"});
series.data.setAll(data);
// Add scrollbarschart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear();chart.appear(1000, 100);
function createFill(category, date, openDate, color, span) { var fillAxis = chart.yAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "category", renderer: am5xy.AxisRendererY.new(root, { inversed: true, cellStartLocation: yAxis.get("renderer").get("cellStartLocation", 0), cellEndLocation: span - yAxis.get("renderer").get("cellStartLocation", 0) }) }) );
fillAxis.get("renderer").labels.template.set("forceHidden", true);
fillAxis.data.setAll(yAxis.data.values);
var series = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: fillAxis, openValueXField: "fromDate", valueXField: "toDate", categoryYField: "category", sequencedInterpolation: true, clustered: false, fill: color, stroke: color }) );
series.columns.template.setAll({ height: am5.p100, templateField: "columnSettings", strokeOpacity: 0, fillOpacity: 0.5, tooltipText: "{category}: {openValueX.formatDate('yyyy-MM-dd HH:mm')} - {valueX.formatDate('yyyy-MM-dd HH:mm')}" });
series.data.processor = am5.DataProcessor.new(root, { dateFields: ["fromDate", "toDate"], dateFormat: "yyyy-MM-dd HH:mm" });
series.data.setAll([ { fromDate: openDate, toDate: date, category: category } ]);}
createFill("John", "2018-01-01 13:30", "2018-01-01 18:30", am5.color(0xff0000), 2);createFill("Peter", "2018-01-01 10:00", "2018-01-01 16:30", am5.color(0x00ff00), 3);<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", "#series-2" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1", "#axis-2", "#axis-3" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 } }, "properties": { "data": [] } } ], "refs": [ { "data-0": [ { "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": "Melania", "fromDate": 1514815200000, "toDate": 1514829600000, "columnSettings": { "fill": { "type": "Color", "value": "#dc67ce" }, "__parse": true }, "__parse": true }, { "category": "Melania", "fromDate": 1514831400000, "toDate": 1514844000000, "columnSettings": { "fill": { "type": "Color", "value": "#ea75dc" }, "__parse": true }, "__parse": true }, { "category": "Donald", "fromDate": 1514804400000, "toDate": 1514844000000, "columnSettings": { "fill": { "type": "Color", "value": "#dc6788" }, "__parse": true }, "__parse": true } ] }, { "data-1": [ { "fromDate": 1514824200000, "toDate": 1514806200000, "category": "John" } ] }, { "data-2": [ { "fromDate": 1514817000000, "toDate": 1514793600000, "category": "Peter" } ] }, { "data-3": [ { "category": "John" }, { "category": "Jane" }, { "category": "Peter" }, { "category": "Melania" }, { "category": "Donald" } ] }, { "axis-0": { "type": "DateAxis", "settings": { "baseInterval": { "timeUnit": "minute", "count": 1 }, "renderer": { "type": "AxisRendererX" } } } }, { "axis-1": { "type": "CategoryAxis", "settings": { "categoryField": "category", "renderer": { "type": "AxisRendererY", "settings": { "inversed": true, "cellStartLocation": 0.2, "cellEndLocation": 0.8 } }, "tooltip": { "type": "Tooltip", "settings": { "themeTags": [ "axis" ], "animationDuration": 200 } } }, "properties": { "data": "#data-3" } } }, { "axis-2": { "type": "CategoryAxis", "settings": { "categoryField": "category", "renderer": { "type": "AxisRendererY", "settings": { "inversed": true, "cellStartLocation": 0.2, "cellEndLocation": 1.8 }, "properties": { "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } }, "properties": { "data": "#data-3" } } }, { "axis-3": { "type": "CategoryAxis", "settings": { "categoryField": "category", "renderer": { "type": "AxisRendererY", "settings": { "inversed": true, "cellStartLocation": 0.2, "cellEndLocation": 2.8 }, "properties": { "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } }, "properties": { "data": "#data-3" } } }, { "series-0": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "openValueXField": "fromDate", "valueXField": "toDate", "categoryYField": "category", "sequencedInterpolation": true }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "height": { "type": "Percent", "value": 100 }, "templateField": "columnSettings", "strokeOpacity": 0, "tooltipText": "{category}: {openValueX.formatDate('yyyy-MM-dd HH:mm')} - {valueX.formatDate('yyyy-MM-dd HH:mm')}" } } } } } } }, { "series-1": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-2", "openValueXField": "fromDate", "valueXField": "toDate", "categoryYField": "category", "sequencedInterpolation": true, "clustered": false, "fill": { "type": "Color", "value": "#ff0000" }, "stroke": { "type": "Color", "value": "#ff0000" } }, "properties": { "data": "#data-1", "columns": { "properties": { "template": { "settings": { "height": { "type": "Percent", "value": 100 }, "templateField": "columnSettings", "strokeOpacity": 0, "fillOpacity": 0.5, "tooltipText": "{category}: {openValueX.formatDate('yyyy-MM-dd HH:mm')} - {valueX.formatDate('yyyy-MM-dd HH:mm')}" } } } } } } }, { "series-2": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-3", "openValueXField": "fromDate", "valueXField": "toDate", "categoryYField": "category", "sequencedInterpolation": true, "clustered": false, "fill": { "type": "Color", "value": "#00ff00" }, "stroke": { "type": "Color", "value": "#00ff00" } }, "properties": { "data": "#data-2", "columns": { "properties": { "template": { "settings": { "height": { "type": "Percent", "value": 100 }, "templateField": "columnSettings", "strokeOpacity": 0, "fillOpacity": 0.5, "tooltipText": "{category}: {openValueX.formatDate('yyyy-MM-dd HH:mm')} - {valueX.formatDate('yyyy-MM-dd HH:mm')}" } } } } } } } ], "root": { "properties": { "dateFormatter": { "settings": { "dateFormat": "yyyy-MM-dd", "dateFields": [ "valueX", "openValueX" ] } } } }}gantt-chart-with-columns-that-span-multiple-categories