Additional axis tooltip to display totals
This demo shows how we can use additional axis and adapters to display total value in additional tooltip on top of the chart.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
/* Create chart instance */var chart = am4core.create("chartdiv", am4charts.XYChart);
/* Add data */chart.data = [ { year: "1994", cars: 1587, motorcycles: 650, bicycles: 121 }, { year: "1995", cars: 1567, motorcycles: 683, bicycles: 146 }, { year: "1996", cars: 1617, motorcycles: 691, bicycles: 138 }, { year: "1997", cars: 1630, motorcycles: 642, bicycles: 127 }, { year: "1998", cars: 1660, motorcycles: 699, bicycles: 105 }, { year: "1999", cars: 1683, motorcycles: 721, bicycles: 109 }, { year: "2000", cars: 1691, motorcycles: 737, bicycles: 112 }, { year: "2001", cars: 1298, motorcycles: 680, bicycles: 101 }, { year: "2002", cars: 1275, motorcycles: 664, bicycles: 97 }, { year: "2003", cars: 1246, motorcycles: 648, bicycles: 93 }, { year: "2004", cars: 1218, motorcycles: 637, bicycles: 101 }, { year: "2005", cars: 1213, motorcycles: 633, bicycles: 87 }, { year: "2006", cars: 1199, motorcycles: 621, bicycles: 79 }, { year: "2007", cars: 1110, motorcycles: 210, bicycles: 81 }, { year: "2008", cars: 1165, motorcycles: 232, bicycles: 75 }, { year: "2009", cars: 1145, motorcycles: 219, bicycles: 88 }, { year: "2010", cars: 1163, motorcycles: 201, bicycles: 82 }, { year: "2011", cars: 1180, motorcycles: 285, bicycles: 87 }, { year: "2012", cars: 1159, motorcycles: 277, bicycles: 71 }];
/* Create axes */var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "year";
var categoryAxis2 = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis2.renderer.opposite = true;categoryAxis2.dataFields.category = "year";categoryAxis2.renderer.grid.disabled = true;categoryAxis2.renderer.labels.template.disabled = true;
/* Create value axis */var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
/* Create series */var series1 = chart.series.push(new am4charts.LineSeries());series1.dataFields.valueY = "cars";series1.dataFields.categoryX = "year";series1.name = "Cars";series1.strokeWidth = 3;series1.tensionX = 0.7;series1.bullets.push(new am4charts.CircleBullet());series1.tooltipText = "{categoryX}: [bold]{valueY}[/]";
var series2 = chart.series.push(new am4charts.LineSeries());series2.dataFields.valueY = "motorcycles";series2.dataFields.categoryX = "year";series2.name = "Motorcycles";series2.strokeWidth = 3;series2.tensionX = 0.7;series2.bullets.push(new am4charts.CircleBullet());series2.tooltipText = "{categoryX}: [bold]{valueY}[/]";
var series3 = chart.series.push(new am4charts.LineSeries());series3.dataFields.valueY = "bicycles";series3.dataFields.categoryX = "year";series3.name = "Bicycles";series3.strokeWidth = 3;series3.tensionX = 0.7;series3.bullets.push(new am4charts.CircleBullet());series3.tooltipText = "{categoryX}: [bold]{valueY}[/]";
/* Add legend */chart.legend = new am4charts.Legend();
/* Create a cursor */chart.cursor = new am4charts.XYCursor();
/* Configure axis tooltip */var axisTooltip = categoryAxis2.tooltip;axisTooltip.background.fill = am4core.color("#07BEB8");axisTooltip.background.strokeWidth = 0;axisTooltip.background.cornerRadius = 3;// axisTooltip.background.pointerLength = 0;axisTooltip.dy = -2;
var dropShadow = new am4core.DropShadowFilter();dropShadow.dy = -1;dropShadow.dx = 1;dropShadow.opacity = 0.5;axisTooltip.filters.push(dropShadow);
/* Decorate axis tooltip content */categoryAxis2.adapter.add("getTooltipText", (text) => { var totalValue = 0; chart.series.each(function (series) { totalValue += series.tooltipDataItem.valueY; }); return "Total: " + chart.numberFormatter.format(totalValue);});
// Make up for the top x axis renderer not actually occupying any spacechart.topAxesContainer.paddingTop = 30;<!--fork of:https://codepen.io/team/amcharts/pen/LrPLwJ
from:https://www.amcharts.com/docs/v4/concepts/axes/axis-tooltips/#Controlling_tooltip_content-->
<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: 300px;}axis-tooltip-display-total-values