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

Question

I'm using the ng2-charts library in my Angular project and it works all fine, but when you add many values in your doughnut chart, especially small values, then it becomes really small (see image below). And to make this more readable I would like to set a minimum width on the values which makes the bigger values a bit smaller. Would this be possible?

See example:
https://stackblitz.com/edit/angular-q1j5ev

don't understand really what you want to achieve. Slice size are proportional to each value, so what do you mean by "set a minimum width on the values which makes the bigger values a bit smaller." ? — Thierry Falvo, Mar 22 '20 at 13:11
That for example value '1' becomes wider so that you can read it at least (so that the number is fully readable) and that the rest will adapt which results in a resize of the doughnut chart — Jamie, Mar 22 '20 at 13:16
but if value '1' becomes wider, the other values won't respect the ratio, and chart won't be a donut chart any more. Maybe you can consider in this situation, to create one unique slide for low values for example <= 50, labeled as `others`, and user can clicks on it to see another donut with drill down on this low values. — Thierry Falvo, Mar 22 '20 at 13:23
@Jamie Check this post https://stackoverflow.com/questions/42833543/trying-to-set-size-of-charts-in-ng2-charts/42932598 — Tzimpo, Mar 22 '20 at 13:27
@ThierryFalvo, alright. That sounds like a good approach indeed. Do you know if 'ng2-charts' allows that, or do you have a working example? — Jamie, Mar 22 '20 at 13:31
@Tzimpo, the resize of the chart itself isn't an issue. As you can see in the example it's already resized to 'height=250' which is my wish. Thanks anyway. — Jamie, Mar 22 '20 at 13:33

score 0 · Answer 1 · answered Mar 22 '20 at 15:05

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.

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

1 Answers1