Legend markers as checkboxes
By default legend displays its markers as squares or mini versions of series. This demo shows how we can replace them with checkboxes.
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/ * --------------------------------------- */
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { year: "2003", europe: 2.5, namerica: 2.5, asia: 2.1, lamerica: 1.2, meast: 0.2, africa: 0.1 }, { year: "2004", europe: 2.6, namerica: 2.7, asia: 2.2, lamerica: 1.3, meast: 0.3, africa: 0.1 }, { year: "2005", europe: 2.8, namerica: 2.9, asia: 2.4, lamerica: 1.4, meast: 0.3, africa: 0.1 }];
// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "year";categoryAxis.title.text = "Local country offices";categoryAxis.renderer.grid.template.location = 0;categoryAxis.renderer.minGridDistance = 20;categoryAxis.renderer.cellStartLocation = 0.1;categoryAxis.renderer.cellEndLocation = 0.9;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());valueAxis.min = 0;valueAxis.title.text = "Expenditure (M)";
// Create seriesfunction createSeries(field, name, stacked) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = field; series.dataFields.categoryX = "year"; series.name = name; series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]"; series.stacked = stacked; series.columns.template.width = am4core.percent(95);}
createSeries("europe", "Europe", false);createSeries("namerica", "North America", true);createSeries("asia", "Asia", false);createSeries("lamerica", "Latin America", true);createSeries("meast", "Middle East", true);createSeries("africa", "Africa", true);
// Add legendchart.legend = new am4charts.Legend();chart.legend.useDefaultMarker = true;
const marker = chart.legend.markers.template;const markerColumn = marker.children.getIndex(0);
const markerColumnActiveState = markerColumn.states.getKey("active");// When a legend item is disabled it triggers its active state,// test it out:// markerColumnActiveState.properties.strokeWidth = 2;// markerColumnActiveState.properties.stroke = "#000";// markerColumnActiveState.properties.strokeOpacity = 1;// markerColumnActiveState.adapter.add("fill", function() {// return am4core.color("red");// });
markerColumn.cornerRadius(0, 0, 0, 0);markerColumn.defaultState.properties.fillOpacity = 0;markerColumn.defaultState.properties.strokeWidth = 1;markerColumn.defaultState.properties.stroke = am4core.color("#000");markerColumn.defaultState.properties.strokeOpacity = 1;// markerColumnActiveState.properties.fillOpacity = 0;
// Add custom image insteadconst checkbox = marker.createChild(am4core.Image);checkbox.width = 20;checkbox.height = 20;checkbox.verticalCenter = "top";checkbox.horizontalCenter = "left";
checkbox.href = "https://cdn.onlinewebfonts.com/svg/img_207414.png";checkbox.dx = 1;checkbox.dy = 1;
const checkboxActiveState = checkbox.states.create("active");checkboxActiveState.properties.opacity = 0;<!--fork of:https://www.amcharts.com/demos/stacked-clustered-column-chart/
answering:https://stackoverflow.com/questions/56652882/how-to-make-amcharts-4-legend-having-a-toggleable-checkbox-->
<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: 500px;}legend-markers-as-checkboxes