0👍
You can aggregate all low values in one unique slice of donut, for example for values < 50.
Then when user clicks on this aggregated slice, another donut can be displayed with all values < 50.
To do that, use (chartClick)
event on your baseChart
element.
<div class="chart-wrapper">
<canvas baseChart height="300" [options]="mainOptions"
[data]="mainData" [chartType]="'doughnut'"
(chartClick)="chartClicked($event)">
</canvas>
</div>
<div class="chart-wrapper" *ngIf="zoomEnabled">
<canvas baseChart height="300" [options]="zoomOptions"
[data]="zoomData" [chartType]="'doughnut'"
(chartClick)="chartClicked($event)">
</canvas>
<button *ngIf="zoomEnabled" (click)="disableZoom()">Hide</button>
</div>
Set a zoomEnabled
flag to true, when user have clicked on Others
slice :
chartClicked({ event, active }: { event: MouseEvent; active: {}[] }): void {
const chart = (active[0] as any)._chart;
const activePoints = chart.getElementAtEvent(event);
const clickedElementIndex = activePoints[0]._index;
if (clickedElementIndex === 0) {
this.enableZoom();
}
}
PS: here, we consider that slice with index: 0
is the aggregated slice with lower values. But you can imagine a more complex scenario with labels…
Source:stackexchange.com