Additional axis tooltip to display totals
This demo shows how we can add an additional date axis on top of the chart to show a tooltip with sum of values of all series. The tooltip uses an adapter to dynamically calculate its content.
/** * --------------------------------------- * 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");
// 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: true, panY: true, wheelX: "panX", wheelY: "zoomX", pinchZoomX: true, paddingTop: 40 }));
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { behavior: "none" }));
cursor.lineY.set("visible", false);
// The datavar data = [ { date: new Date(2022, 0, 1).getTime(), cars: 1587, motorcycles: 650, bicycles: 121 }, { date: new Date(2022, 0, 2).getTime(), cars: 1567, motorcycles: 683, bicycles: 146 }, { date: new Date(2022, 0, 3).getTime(), cars: 1617, motorcycles: 691, bicycles: 138 }, { date: new Date(2022, 0, 4).getTime(), cars: 1630, motorcycles: 642, bicycles: 127 }, { date: new Date(2022, 0, 5).getTime(), cars: 1660, motorcycles: 699, bicycles: 105 }, { date: new Date(2022, 0, 6).getTime(), cars: 1683, motorcycles: 721, bicycles: 109 }, { date: new Date(2022, 0, 7).getTime(), cars: 1691, motorcycles: 737, bicycles: 112 }, { date: new Date(2022, 0, 8).getTime(), cars: 1298, motorcycles: 680, bicycles: 101 }, { date: new Date(2022, 0, 9).getTime(), cars: 1275, motorcycles: 664, bicycles: 97 }, { date: new Date(2022, 0, 10).getTime(), cars: 1246, motorcycles: 648, bicycles: 93 }, { date: new Date(2022, 0, 11).getTime(), cars: 1318, motorcycles: 697, bicycles: 111 }, { date: new Date(2022, 0, 12).getTime(), cars: 1213, motorcycles: 633, bicycles: 87 }, { date: new Date(2022, 0, 13).getTime(), cars: 1199, motorcycles: 621, bicycles: 79 }, { date: new Date(2022, 0, 14).getTime(), cars: 1110, motorcycles: 210, bicycles: 81 }, { date: new Date(2022, 0, 15).getTime(), cars: 1165, motorcycles: 232, bicycles: 75 }, { date: new Date(2022, 0, 16).getTime(), cars: 1145, motorcycles: 219, bicycles: 88 }, { date: new Date(2022, 0, 17).getTime(), cars: 1163, motorcycles: 201, bicycles: 82 }, { date: new Date(2022, 0, 18).getTime(), cars: 1180, motorcycles: 285, bicycles: 87 }, { date: new Date(2022, 0, 19).getTime(), cars: 1159, motorcycles: 277, bicycles: 71 }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}), tooltip: am5.Tooltip.new(root, {}) }));
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
// Set up secondary X axis to show sum tooltip forvar xAxis2 = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { opposite: true }),
tooltip: am5.Tooltip.new(root, {}) }));
// Disable labelsxAxis2.get("renderer").labels.template.set("forceHidden", true);
// Configure tooltip content using adapterxAxis2.get("tooltip").label.adapters.add("text", function (text, target) { var sum = 0; chart.series.each(function (series) { var dataItem = series.get("tooltipDataItem"); if (dataItem && !series.strokes.template.get("forceHidden")) { sum += dataItem.get("valueY"); } }); return "Total: [bold]" + root.numberFormatter.format(sum) + "[/]";});
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function createSeries(name, field, hidden) { if (hidden) { var series = chart.series.push( am5xy.LineSeries.new(root, { xAxis: xAxis2, yAxis: yAxis, valueYField: field, valueXField: "date" }) );
series.strokes.template.setAll({ forceHidden: true });
series.data.setAll(data); } else { var series = chart.series.push( am5xy.LineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, stacked: true, valueYField: field, valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{name}: [bold]{valueY}[/]" }) }) );
series.fills.template.setAll({ fillOpacity: 0.5, visible: true });
series.data.setAll(data); series.appear(1000); }}
createSeries("Cars", "cars");createSeries("Motorcycles", "motorcycles");createSeries("Bicycles", "bicycles");
createSeries(undefined, "cars", true);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/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": true, "panY": true, "wheelX": "panX", "wheelY": "zoomX", "pinchZoomX": true, "paddingTop": 40, "cursor": { "type": "XYCursor", "settings": { "behavior": "none" }, "properties": { "lineY": { "settings": { "visible": false } } } } }, "properties": { "series": [ "#series-0", "#series-1", "#series-2", "#series-3" ], "xAxes": [ "#axis-0", "#axis-1" ], "yAxes": [ "#axis-2" ] }, "refs": [ { "data-0": [ { "date": 1640988000000, "cars": 1587, "motorcycles": 650, "bicycles": 121 }, { "date": 1641074400000, "cars": 1567, "motorcycles": 683, "bicycles": 146 }, { "date": 1641160800000, "cars": 1617, "motorcycles": 691, "bicycles": 138 }, { "date": 1641247200000, "cars": 1630, "motorcycles": 642, "bicycles": 127 }, { "date": 1641333600000, "cars": 1660, "motorcycles": 699, "bicycles": 105 }, { "date": 1641420000000, "cars": 1683, "motorcycles": 721, "bicycles": 109 }, { "date": 1641506400000, "cars": 1691, "motorcycles": 737, "bicycles": 112 }, { "date": 1641592800000, "cars": 1298, "motorcycles": 680, "bicycles": 101 }, { "date": 1641679200000, "cars": 1275, "motorcycles": 664, "bicycles": 97 }, { "date": 1641765600000, "cars": 1246, "motorcycles": 648, "bicycles": 93 }, { "date": 1641852000000, "cars": 1318, "motorcycles": 697, "bicycles": 111 }, { "date": 1641938400000, "cars": 1213, "motorcycles": 633, "bicycles": 87 }, { "date": 1642024800000, "cars": 1199, "motorcycles": 621, "bicycles": 79 }, { "date": 1642111200000, "cars": 1110, "motorcycles": 210, "bicycles": 81 }, { "date": 1642197600000, "cars": 1165, "motorcycles": 232, "bicycles": 75 }, { "date": 1642284000000, "cars": 1145, "motorcycles": 219, "bicycles": 88 }, { "date": 1642370400000, "cars": 1163, "motorcycles": 201, "bicycles": 82 }, { "date": 1642456800000, "cars": 1180, "motorcycles": 285, "bicycles": 87 }, { "date": 1642543200000, "cars": 1159, "motorcycles": 277, "bicycles": 71 } ] }, { "axis-0": { "type": "DateAxis", "settings": { "baseInterval": { "timeUnit": "day", "count": 1 }, "renderer": { "type": "AxisRendererX" }, "tooltip": { "type": "Tooltip" } } } }, { "axis-1": { "type": "DateAxis", "settings": { "baseInterval": { "timeUnit": "day", "count": 1 }, "renderer": { "type": "AxisRendererX", "settings": { "opposite": true }, "properties": { "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } } } }, "tooltip": { "type": "Tooltip" } } } }, { "axis-2": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "LineSeries", "settings": { "name": "Cars", "xAxis": "#axis-0", "yAxis": "#axis-2", "stacked": true, "valueYField": "cars", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{name}: [bold]{valueY}[/]" } } }, "properties": { "data": "#data-0", "fills": { "properties": { "template": { "settings": { "fillOpacity": 0.5, "visible": true } } } } } } }, { "series-1": { "type": "LineSeries", "settings": { "name": "Motorcycles", "xAxis": "#axis-0", "yAxis": "#axis-2", "stacked": true, "valueYField": "motorcycles", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{name}: [bold]{valueY}[/]" } } }, "properties": { "data": "#data-0", "fills": { "properties": { "template": { "settings": { "fillOpacity": 0.5, "visible": true } } } } } } }, { "series-2": { "type": "LineSeries", "settings": { "name": "Bicycles", "xAxis": "#axis-0", "yAxis": "#axis-2", "stacked": true, "valueYField": "bicycles", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{name}: [bold]{valueY}[/]" } } }, "properties": { "data": "#data-0", "fills": { "properties": { "template": { "settings": { "fillOpacity": 0.5, "visible": true } } } } } } }, { "series-3": { "type": "LineSeries", "settings": { "xAxis": "#axis-1", "yAxis": "#axis-2", "valueYField": "cars", "valueXField": "date" }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } } ]}additional-x-axis-tooltip-on-top-of-the-chart-to-show-sum-of