Allow just single series to be displayed at a time
This demo shows how we can use Legend’s hit event to toggle other series off when one series is toggled on, making sure that there’s only one series displayed at any given time.
Open in:New tab
am4core.useTheme(am4themes_animated);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { date: new Date(2018, 0, 1), value: 450, value2: 362, value3: 699 }, { date: new Date(2018, 0, 2), value: 269, value2: 450, value3: 841 }, { date: new Date(2018, 0, 3), value: 700, value2: 358, value3: 699 }, { date: new Date(2018, 0, 4), value: 490, value2: 367, value3: 500 }, { date: new Date(2018, 0, 5), value: 500, value2: 485, value3: 369 }, { date: new Date(2018, 0, 6), value: 550, value2: 354, value3: 250 }, { date: new Date(2018, 0, 7), value: 420, value2: 350, value3: 600 }];
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesfunction createSeries(field, name) { var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = field; series.dataFields.dateX = "date"; series.name = name; series.tooltipText = "{dateX}: [b]{valueY}[/]"; series.strokeWidth = 2;
var bullet = series.bullets.push(new am4charts.CircleBullet()); bullet.circle.stroke = am4core.color("#fff"); bullet.circle.strokeWidth = 2;
return series;}
var series1 = createSeries("value", "Series #1");var series2 = createSeries("value2", "Series #2");series2.hidden = true;var series3 = createSeries("value3", "Series #3");series3.hidden = true;
chart.legend = new am4charts.Legend();chart.cursor = new am4charts.XYCursor();
chart.legend.itemContainers.template.togglable = false;
chart.legend.itemContainers.template.events.on("hit", function (event) { var target = event.target; target.isActive = false; var currentSeries = target.dataItem.dataContext; chart.series.each(function (series) { if (series != currentSeries) { series.hide(); } });
currentSeries.show();});<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: 250px;}inversed-legend-behavior