Chartjs-How to set a minimum width on the values in a doughnut chart?

by

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…

See this simplified Stackblitz demo.

Leave a comment