Disabling toggling of items in Legend

Normally a Legend will allow toggling of its items. This will also toggle related items, like chart's Series. This tutorial will show how to disable this default functionality.

To disable toggling of items, all we have to do is to make those items non-clickable.

Legend's items are stored in its itemContainers template list. So all we have to do is to set clickable (and probably focusable) to false on its template.

We will also want to disable mouse cursor for turning to pointer when legend items are hovered.

chart.legend.itemContainers.template.clickable = false;
chart.legend.itemContainers.template.focusable = false;
chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
chart.legend.itemContainers.template.clickable = false;
chart.legend.itemContainers.template.focusable = false;
chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
{
  // ...
  "legend": {
    "itemContainers": {
      "clickable": false,
      "focusable": false
    }
  }
}

See the Pen amCharts V4: Legend (disabling toggling) by amCharts (@amcharts) on CodePen.24419

That's it.

Related tutorials