Adding check marks to legend markers

This tutorial will walk through the steps needed to turn legend markers into checkboxes.

Adding a check mark

Each marker in the legend is created from a template, which is accessible via legend's markers.template.

Besides enabling us to set any setting that would be applied to any new marker created by the legend, a template also provides a mean to run newly-created element via custom function.

We'll use markers.tempalte.setup to push a check mark graphics element into each new marker being created by a legend.

legend.markers.template.setup = function(marker) {
  let check = am5.Graphics.new(root, {
    fill: am5.color(0x000000),
    fillOpacity: 1,
    width: 20,
    height: 20,
    layer: 50,
    svgPath: "M15.75 2.527c-.61-.468-1.46-.328-1.902.32l-6.325 9.255L4.04 8.328a1.3 1.3 0 0 0-1.922-.062 1.505 1.505 0 0 0-.062 2.043s4.234 4.695 4.843 5.168c.61.468 1.457.328 1.903-.32L16.05 4.55c.445-.653.308-1.555-.301-2.024Zm0 0"
  });
  marker.children.push(check);
}

legend.markers.template.setup = function(marker) {
  var check = am5.Graphics.new(root, {
    fill: am5.color(0x000000),
    fillOpacity: 1,
    width: 20,
    height: 20,
    layer: 50,
    svgPath: "M15.75 2.527c-.61-.468-1.46-.328-1.902.32l-6.325 9.255L4.04 8.328a1.3 1.3 0 0 0-1.922-.062 1.505 1.505 0 0 0-.062 2.043s4.234 4.695 4.843 5.168c.61.468 1.457.328 1.903-.32L16.05 4.55c.445-.653.308-1.555-.301-2.024Zm0 0"
  });
  marker.children.push(check);
}

In the above code, we are using a Graphics element which allows us to use an SVG path to easily draw a shape.

Noteworthy is the layer setting. Setting it to a higher number ensures that our check mark element will be above any other elements that might end up within the marker.

Enabling disabled state

Now, let's make our check mark disappear when legend item is toggled off.

When it happens, the whole legend item gets a "disabled" state applied to itself and all its children.

We'll create such state to our check mark element, which would override its fillOpacity to zero, effectively making it invisible.

check.states.create("disabled", {
  fillOpacity: 0
});

check.states.create("disabled", {
  fillOpacity: 0
});

For more information about the states, visit "Element states" tutorial.

Using default markers

Some series (e.g. line series) will try to replicate their looks in legend's markers.

Plopping a check mark on top of a line would not look, so we might need to enable default (square) markers in our legend.

let legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.p50,
  x: am5.p50,
  useDefaultMarker: true
}));

var legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.p50,
  x: am5.p50,
  useDefaultMarker: true
}));

Working demo

Below is a complete code, and a working demo.

legend.markers.template.setup = function(marker) {
  let check = am5.Graphics.new(root, {
    fill: am5.color(0x000000),
    fillOpacity: 1,
    width: 20,
    height: 20,
    layer: 50,
    svgPath: "M15.75 2.527c-.61-.468-1.46-.328-1.902.32l-6.325 9.255L4.04 8.328a1.3 1.3 0 0 0-1.922-.062 1.505 1.505 0 0 0-.062 2.043s4.234 4.695 4.843 5.168c.61.468 1.457.328 1.903-.32L16.05 4.55c.445-.653.308-1.555-.301-2.024Zm0 0"
  });
  
  check.states.create("disabled", {
    fillOpacity: 0
  });
  
  marker.children.push(check);
}

legend.markers.template.setup = function(marker) {
  var check = am5.Graphics.new(root, {
    fill: am5.color(0x000000),
    fillOpacity: 1,
    width: 20,
    height: 20,
    layer: 50,
    svgPath: "M15.75 2.527c-.61-.468-1.46-.328-1.902.32l-6.325 9.255L4.04 8.328a1.3 1.3 0 0 0-1.922-.062 1.505 1.505 0 0 0-.062 2.043s4.234 4.695 4.843 5.168c.61.468 1.457.328 1.903-.32L16.05 4.55c.445-.653.308-1.555-.301-2.024Zm0 0"
  });
  
  check.states.create("disabled", {
    fillOpacity: 0
  });
  
  marker.children.push(check);
}

See the Pen
Stacked and Clustered Column Chart by amCharts team (@amcharts)
on CodePen.0