Grouping several series into single legend item
This demo shows how we can selectively add series to legend, then toggle multiple series with a single legend item.
The code uses series’ on() method to watch for changes in its visible setting, which is triggered when series is toggled via legend. It then hides or shows related series.
It also uses series’ legendLabelText to consolidate multiple series names and their values into a single legend item.
Open in:New tab
/** * --------------------------------------- * 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", 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 data = [ { year: "2021", europe: 2.5, namerica: 2.5, asia: 2.1, lamerica: 1, meast: 0.8, africa: 0.4 }, { year: "2022", europe: 2.6, namerica: 2.7, asia: 2.2, lamerica: 0.5, meast: 0.4, africa: 0.3 }, { year: "2023", europe: 2.8, namerica: 2.9, asia: 2.4, lamerica: 0.3, meast: 0.9, africa: 0.5 }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "year", renderer: am5xy.AxisRendererX.new(root, { cellStartLocation: 0.1, cellEndLocation: 0.9 }),
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 makeSeries(name, fieldName, legendText) { var series = chart.series.push( am5xy.LineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, categoryXField: "year", legendLabelText: legendText || "" }) );
series.data.setAll(data); series.appear(); if (legendText) { legend.data.push(series); }
series.on("visible", function (visible, series) { var relatedSeries = []; switch (series.get("valueYField")) { case "europe": relatedSeries = ["asia"]; break; case "namerica": relatedSeries = ["lamerica"]; break; case "meast": relatedSeries = ["africa"]; break; }
chart.series.each(function (series) { if (relatedSeries.indexOf(series.get("valueYField")) !== -1) { if (visible) { series.show(); } else { series.hide(); } } }); });}
makeSeries("Europe", "europe", "Europe {europe} / Asia {asia}");makeSeries("North America", "namerica", "North America {namerica} / Latin America {lamerica}");makeSeries("Asia", "asia");makeSeries("Latin America", "lamerica");makeSeries("Middle East", "meast", "Middle East {meast} / Africa {africa}");makeSeries("Africa", "africa");
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { xAxis: xAxis }));
cursor.lineY.set("visible", false);
// 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: 98vh;}grouping-several-series-into-single-legend-item