Custom external legend
This demo shows how we can use some custom code executed on chart load to build completely custom but interactive HTML-based legend for our chart.
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.PieChart);
// Add datachart.data = [ { country: "Lithuania", litres: 501.9 }, { country: "Czechia", litres: 301.9 }, { country: "Ireland", litres: 201.1 }, { country: "Germany", litres: 165.8 }, { country: "Australia", litres: 139.9 }, { country: "Austria", litres: 128.3 }, { country: "UK", litres: 99 }, { country: "Belgium", litres: 60 }, { country: "The Netherlands", litres: 50 }];
// Add and configure Seriesvar pieSeries = chart.series.push(new am4charts.PieSeries());pieSeries.dataFields.value = "litres";pieSeries.dataFields.category = "country";pieSeries.labels.template.disabled = true;
chart.radius = am4core.percent(95);
// Create custom legendchart.events.on("ready", function (event) { // populate our custom legend when chart renders chart.customLegend = document.getElementById("legend"); pieSeries.dataItems.each(function (row, i) { var color = chart.colors.getIndex(i); var percent = Math.round(row.values.value.percent * 100) / 100; var value = row.value; legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" onmouseover="hoverSlice(' + i + ');" onmouseout="blurSlice(' + i + ');" style="color: ' + color + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.category + '<div class="legend-value">' + value + " | " + percent + "%</div></div>"; });});
function toggleSlice(item) { var slice = pieSeries.dataItems.getIndex(item); if (slice.visible) { slice.hide(); } else { slice.show(); }}
function hoverSlice(item) { var slice = pieSeries.slices.getIndex(item); slice.isHover = true;}
function blurSlice(item) { var slice = pieSeries.slices.getIndex(item); slice.isHover = false;}<div id="chartdiv"></div><div id="legend"></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: 530px; height: 450px; font-size: 11px; border: 1px solid #eee; float: left;}
#legend { width: 200px; height: 450px; border: 1px solid #eee; margin-left: 10px; float: left;}
#legend .legend-item { margin: 10px; font-size: 15px; font-weight: bold; cursor: pointer;}
#legend .legend-item .legend-value { font-size: 12px; font-weight: normal; margin-left: 22px;}
#legend .legend-item .legend-marker { display: inline-block; width: 12px; height: 12px; border: 1px solid #ccc; margin-right: 10px;}
#legend .legend-item.disabled .legend-marker { opacity: 0.5; background: #ddd;}custom-external-legend