How to add css gap to circle segments of a donut chart css

Question

I have this donut char on stackblitz =

https://stackblitz.com/edit/angular-material-dtnpcd?file=app%2Fapp.component.ts

I am trying to add a gap in between each circle segment of this svg donut chart so it's easier to see the different pieces of the chart for accessibility.

Any help would be greatly appreciated

Here is a screenshot of what is expected vs what is current:

Moritz Roessler Moritz Roessler · Accepted Answer · 2020-07-21T21:30:50

I just accidentally found a solution by playing around with the svg attributes and thought it might help you. The fix is quite simple, just change the following line.

[attr.stroke-dasharray]="
    item.utilization + ' ' + (100 - item.utilization)
"

[attr.stroke-dasharray]="
    item.utilization - 1 + ' ' + (100 - item.utilization + 1)
"

_{I tried to fork your stackblitz to link a working version but it just keeps spinning}

Edit:

Ok, the first approach doesn't make much sense given how dash-array and -offset seems to work.

The problem with the first one is that you subtract a fixed amount of a percentage. This will only work if the percentage (item.utilization) is greater than that amount. This also skews the visual representation of the chart because you no longer represent the actual percentage.

The much better approach is to base your chart on 100 + x percent (x being the number of elements in your chart), i.e. 105. This gives the chart more space for gaps. You can then use the dash-offset to move the individual items around based on their index.

[attr.stroke-dasharray]="(item.utilization) + ' ' + (105 -  item.utilization)"
[attr.stroke-dashoffset]="
    i === 0 ? 25 : (105 - item?.runningTotal + 25 - i)
"

Using 105 leaves a big gap. To make that gap smaller, you can use 102.5 and i / 2. Keep in mind, that you need to increase the percentage by the number of elements in your chart since each element takes up 1% (0.5% respectively) of the additional space provided.

Edit2: You can use donutData.length to add more space.

[attr.stroke-dasharray]="(item.utilization) + ' ' + (100 + donutData?.length / 2 -  item.utilization)"
[attr.stroke-dashoffset]="
    i === 0 ? 25 : (100 + donutData?.length / 2 - item?.runningTotal + 25 - i/2)
"

How to add css gap to circle segments of a donut chart css

1 Answers