Selectively placing legend items in different containers
This demo shows how we can selectively place chart legend’s items into separate containers.
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/ * --------------------------------------- */
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, value4: 269, value5: 450, value6: 841 }, { date: new Date(2018, 0, 2), value: 269, value2: 450, value3: 841, value4: 700, value5: 358, value6: 699 }, { date: new Date(2018, 0, 3), value: 700, value2: 358, value3: 699, value4: 490, value5: 367, value6: 500 }, { date: new Date(2018, 0, 4), value: 490, value2: 367, value3: 500, value4: 500, value5: 485, value6: 369 }, { date: new Date(2018, 0, 5), value: 500, value2: 485, value3: 369, value4: 550, value5: 354, value6: 250 }, { date: new Date(2018, 0, 6), value: 550, value2: 354, value3: 250, value4: 420, value5: 350, value6: 600 }, { date: new Date(2018, 0, 7), value: 420, value2: 350, value3: 600, value4: 450, value5: 362, value6: 699 }];
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;dateAxis.renderer.minGridDistance = 30;
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;}
createSeries("value", "Series #1");createSeries("value2", "Series #2");createSeries("value3", "Series #3");
createSeries("value4", "Series #4");createSeries("value5", "Series #5");createSeries("value6", "Series #6");
chart.cursor = new am4charts.XYCursor();
chart.legend = new am4charts.Legend();chart.legend.position = "right";
// create alternative legendvar legend2 = chart.chartAndLegendContainer.createChild(am4core.Container);legend2.maxWidth = 220;legend2.toBack();legend2.margin(10, 5, 10, 10);legend2.valign = "middle";legend2.layout = "vertical";
chart.legend.events.on("datavalidated", function () { chart.legend.itemContainers.getIndex(5).parent = legend2; chart.legend.itemContainers.getIndex(3).parent = legend2; chart.legend.itemContainers.getIndex(1).parent = legend2;});<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;}selectively-placing-legend-items-in-different-containers