How to make AmCharts 4 legend having a toggleable checkbox

Question

I am trying to set up AmCharts 4 charts witha checkbox legend.

I have set a background image to every legend, but can't find a way to toggle that image when turning on and off the legend item.

        // add legend
        this.chart.legend = new am4charts.Legend();
        this.chart.legend.useDefaultMarker = true;

        // Remove square from marker template
        const marker = this.chart.legend.markers.template;
        marker.disposeChildren();

        // Add custom image instead
        const checkbox = marker.createChild(am4core.Image);
        checkbox.width = 40;
        checkbox.height = 40;
        checkbox.verticalCenter = "top";
        checkbox.horizontalCenter = "left";
        checkbox.adapter.add("href", (href: any, target: any) => {
            if(!target.dataItem.dataContext.isHidden) {
                return "http://cdn.onlinewebfonts.com/svg/img_207414.png";
            }
            else {
                return '';
            }
        });

user_781824 · Answer

I would keep the original marker square and just tweak it to:

maintain existing interaction behavior,
form the bounding box for the checkbox (note: his checkbox image has no bounding box).

When a Legend Item is toggled, its objects are changed to the "active" State. So instead of trying to use an adapter on the href of your Image, create an "active" State for it in which its opacity is set to 0.

Omitting the adapter (and adjusting the size of either the image and/or the marker's square so they match), here's the additional code:

  const markerColumn = marker.children.getIndex(0);

  // Optionally straighten out the square
  markerColumn.cornerRadius(0, 0, 0, 0);
  // Hide the square
  markerColumn.defaultState.properties.fillOpacity = 0;
  // Form the bounding box
  markerColumn.defaultState.properties.strokeWidth = 1;
  markerColumn.defaultState.properties.stroke = am4core.color("#000");
  markerColumn.defaultState.properties.strokeOpacity = 1;

  // After your checkbox code... again, omit/comment out the href adapter
  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;

Demo:

https://codepen.io/team/amcharts/pen/89495edd36c6bf90d57262e2d7b9c182

Screenshot:

How to make AmCharts 4 legend having a toggleable checkbox

1 Answers