Consolidating values from multiple axes into a single tooltip
If you have multiple axes and a chart cursor, each axis will get a tooltip when you hover plot area. This demo shows you you can use adapters to consolidate values from multiple axis’ tooltips into one.
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/ * --------------------------------------- */
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
//
// Increase contrast by taking evey second colorchart.colors.step = 2;
// Add datachart.data = generateChartData();
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.minGridDistance = 50;
// Create seriesfunction createAxisAndSeries(field, name, opposite, bullet) { var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); if (chart.yAxes.indexOf(valueAxis) != 0) { valueAxis.syncWithAxis = chart.yAxes.getIndex(0); }
var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = field; series.dataFields.dateX = "date"; series.strokeWidth = 2; series.yAxis = valueAxis; series.name = name; series.tooltipText = "{name}: [bold]{valueY}[/]"; series.tensionX = 0.8; series.showOnInit = true;
var interfaceColors = new am4core.InterfaceColorSet();
switch (bullet) { case "triangle": var bullet = series.bullets.push(new am4charts.Bullet()); bullet.width = 12; bullet.height = 12; bullet.horizontalCenter = "middle"; bullet.verticalCenter = "middle";
var triangle = bullet.createChild(am4core.Triangle); triangle.stroke = interfaceColors.getFor("background"); triangle.strokeWidth = 2; triangle.direction = "top"; triangle.width = 12; triangle.height = 12; break; case "rectangle": var bullet = series.bullets.push(new am4charts.Bullet()); bullet.width = 10; bullet.height = 10; bullet.horizontalCenter = "middle"; bullet.verticalCenter = "middle";
var rectangle = bullet.createChild(am4core.Rectangle); rectangle.stroke = interfaceColors.getFor("background"); rectangle.strokeWidth = 2; rectangle.width = 10; rectangle.height = 10; break; default: var bullet = series.bullets.push(new am4charts.CircleBullet()); bullet.circle.stroke = interfaceColors.getFor("background"); bullet.circle.strokeWidth = 2; break; }
valueAxis.renderer.line.strokeOpacity = 1; valueAxis.renderer.line.strokeWidth = 2; valueAxis.renderer.line.stroke = series.stroke; valueAxis.renderer.labels.template.fill = series.stroke; valueAxis.renderer.opposite = opposite;
return series;}
var series1 = createAxisAndSeries("visits", "Visits", false, "circle");var series2 = createAxisAndSeries("views", "Views", true, "triangle");var series3 = createAxisAndSeries("hits", "Hits", true, "rectangle");
// Configure axis tooltipsseries3.yAxis.adapter.add("getTooltipText", function (text, target) { var cursorPosition = chart.cursor.yPosition; return text + " : " + series2.yAxis.getTooltipText(cursorPosition);});series2.yAxis.cursorTooltipEnabled = false;
// Add legendchart.legend = new am4charts.Legend();
// Add cursorchart.cursor = new am4charts.XYCursor();
// generate some random data, quite different rangefunction generateChartData() { var chartData = []; var firstDate = new Date(); firstDate.setDate(firstDate.getDate() - 100); firstDate.setHours(0, 0, 0, 0);
var visits = 1600; var hits = 2900; var views = 8700;
for (var i = 0; i < 15; i++) { // we create date objects here. In your data, you can have date strings // and then set format of your dates using chart.dataDateFormat property, // however when possible, use date objects, as this will speed up chart rendering. var newDate = new Date(firstDate); newDate.setDate(newDate.getDate() + i);
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); hits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); views += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
chartData.push({ date: newDate, visits: visits, hits: hits, views: views }); } return chartData;}<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: 500px;}consolidating-values-from-multiple-axes-into-a-single-toolti