Combining tooltip values from multiple series
This demo shows how we can combine values from multiple series into a single tooltip, using adapters.
Regular series tooltip
Section titled “Regular series tooltip”/** * --------------------------------------- * 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: false, panY: false, wheelX: "panX", wheelY: "zoomX", maxTooltipDistance: -1 }));
var tooltip = am5.Tooltip.new(root, {});
chart.plotContainer.set("tooltipPosition", "pointer");chart.plotContainer.set("tooltipText", "a");chart.plotContainer.set("tooltip", tooltip);
tooltip.label.adapters.add("text", function (text, target) { text = ""; var i = 0; chart.series.each(function (series) { var tooltipDataItem = series.get("tooltipDataItem"); if (tooltipDataItem) { if (i != 0) { text += "\n"; } text += "[" + series.get("stroke").toString() + "]●[/] [bold width:100px]" + series.get("name") + ":[/] " + tooltipDataItem.get("valueY"); } i++; }); return text;});
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" }));
cursor.lineY.set("visible", false);
// The datavar 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: 1318, motorcycles: 697, bicycles: 111 }, { 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// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "year", startLocation: 0.5, endLocation: 0.5, renderer: am5xy.AxisRendererX.new(root, {}), tooltip: am5.Tooltip.new(root, {}) }));
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function createSeries(name, field) { var series = chart.series.push( am5xy.LineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: field, categoryXField: "year" }) );
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");
// Add scrollbar// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/chart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
// 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": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "maxTooltipDistance": -1, "cursor": { "type": "XYCursor", "settings": { "behavior": "zoomX" }, "properties": { "lineY": { "settings": { "visible": false } } } }, "scrollbarX": { "type": "Scrollbar", "settings": { "orientation": "horizontal" } } }, "properties": { "series": [ "#series-0", "#series-1", "#series-2" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ], "plotContainer": { "settings": { "tooltipPosition": "pointer", "tooltipText": "a", "tooltip": { "type": "Tooltip" } } } }, "refs": [ { "data-0": [ { "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": 1318, "motorcycles": 697, "bicycles": 111 }, { "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 } ] }, { "axis-0": { "type": "CategoryAxis", "settings": { "categoryField": "year", "startLocation": 0.5, "endLocation": 0.5, "renderer": { "type": "AxisRendererX" }, "tooltip": { "type": "Tooltip" } }, "properties": { "data": "#data-0" } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "LineSeries", "settings": { "name": "Cars", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "cars", "categoryXField": "year" }, "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-1", "valueYField": "motorcycles", "categoryXField": "year" }, "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-1", "valueYField": "bicycles", "categoryXField": "year" }, "properties": { "data": "#data-0", "fills": { "properties": { "template": { "settings": { "fillOpacity": 0.5, "visible": true } } } } } } } ]}combined-tooltipFree-floating tooltip
Section titled “Free-floating tooltip”/** * --------------------------------------- * 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: false, panY: false, wheelX: "panX", wheelY: "zoomX", maxTooltipDistance: -1 }));
var tooltip = am5.Tooltip.new(root, {});
chart.plotContainer.set("tooltipPosition", "pointer");chart.plotContainer.set("tooltipText", "a");chart.plotContainer.set("tooltip", tooltip);
tooltip.label.adapters.add("text", function (text, target) { text = ""; var i = 0; chart.series.each(function (series) { var tooltipDataItem = series.get("tooltipDataItem"); if (tooltipDataItem) { if (i != 0) { text += "\n"; } text += "[" + series.get("stroke").toString() + "]●[/] [bold width:100px]" + series.get("name") + ":[/] " + tooltipDataItem.get("valueY"); } i++; }); return text;});
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" }));
cursor.lineY.set("visible", false);
// The datavar 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: 1318, motorcycles: 697, bicycles: 111 }, { 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// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "year", startLocation: 0.5, endLocation: 0.5, renderer: am5xy.AxisRendererX.new(root, {}), tooltip: am5.Tooltip.new(root, {}) }));
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function createSeries(name, field) { var series = chart.series.push( am5xy.LineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: field, categoryXField: "year" }) );
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");
// Add scrollbar// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/chart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
// 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": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "maxTooltipDistance": -1, "cursor": { "type": "XYCursor", "settings": { "behavior": "zoomX" }, "properties": { "lineY": { "settings": { "visible": false } } } }, "scrollbarX": { "type": "Scrollbar", "settings": { "orientation": "horizontal" } } }, "properties": { "series": [ "#series-0", "#series-1", "#series-2" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ], "plotContainer": { "settings": { "tooltipPosition": "pointer", "tooltipText": "a", "tooltip": { "type": "Tooltip" } } } }, "refs": [ { "data-0": [ { "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": 1318, "motorcycles": 697, "bicycles": 111 }, { "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 } ] }, { "axis-0": { "type": "CategoryAxis", "settings": { "categoryField": "year", "startLocation": 0.5, "endLocation": 0.5, "renderer": { "type": "AxisRendererX" }, "tooltip": { "type": "Tooltip" } }, "properties": { "data": "#data-0" } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "LineSeries", "settings": { "name": "Cars", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "cars", "categoryXField": "year" }, "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-1", "valueYField": "motorcycles", "categoryXField": "year" }, "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-1", "valueYField": "bicycles", "categoryXField": "year" }, "properties": { "data": "#data-0", "fills": { "properties": { "template": { "settings": { "fillOpacity": 0.5, "visible": true } } } } } } } ]}combined-tooltip