Topic: Add additional logic on chart legend clicks (hiding/unhiding datasets)
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 https://www.chartjs.org/docs/latest/developers/api.html#getdatasetmeta-index
which is used in solutions like
https://stackoverflow.com/questions/42555513/chart-js-change-legend-toggle-behaviour
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
For anyone stumbling upon this, the solution was
html
<canvas mdbChart #chartCanvas
...
[options]="options"
...
></canvas>
ts
@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
this.chartCanvas.chart.update()
### ADDITIONAL LOGIC HERE ###
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 9.4.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes