Topic: Add additional logic on chart legend clicks (hiding/unhiding datasets)

QPdev free asked 2 years ago

I want to do additional logic whenever someone clicks a legend item (hides/unhides a dataset), namely rescaling the yAxis.

How can i achieve this? I tried to manually override the options.legend.onclick handler, but i cannot access chart.getDatasetMeta() from

which is used in solutions like

Where does the BaseChartDirective expose this, or is there any other way how i can add additional logic to these toggles?

Thank you in advance

QPdev free answered 2 years ago

For anyone stumbling upon this, the solution was


<canvas mdbChart #chartCanvas


@ViewChild(BaseChartDirective, { static: true }) chartCanvas: BaseChartDirective;


options.legend = {
        onClick: (_: MouseEvent, legendItem: Chart.ChartLegendLabelItem) => {
            const metaData = this.chartCanvas.chart.getDatasetMeta(legendItem.datasetIndex)
            metaData.hidden = !metaData.hidden
            ### ADDITIONAL LOGIC HERE ###

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 9.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: Yes