Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

Zero spacing option for pie chart

Open vzakharov-rxnt opened this issue 3 years ago • 2 comments

Feature Proposal

Currently 0 spacing is a default which results in non-zero spacing. It is not possible to specify 0 spacing, i.e. 0 pixel space between arcs on a pie chart. In our scenario having too many sections makes the last few sections appear entirely in white because of the non-zero spacing. Some sections before that appear partially in white, as if some fog effect was applied.

The effect looks like this: image

Possible Implementation

No response

vzakharov-rxnt avatar Nov 09 '22 17:11 vzakharov-rxnt

This is because of the borderWidth property that defaults to 2, if you set this to 1 this behaviour won't happen

Edit:
Meant setting borderWidth to 0 😅

LeeLenaleee avatar Nov 09 '22 23:11 LeeLenaleee

@LeeLenaleee Thank you, I had to use borderWidth: 0, since there is still some fog with 1. Here is a code snippet to help future visitors of this ticket. It is based on your answer from Stack Overflow:

  • https://stackoverflow.com/a/66466033/897326
options: {
  elements: {
    arc: {
      borderWidth: 0,
    }
  },
}

Would it make sense to expand the docs and explain how each config element affects chart render? With some research, I found that offset and spacing are doing something similar, but they are in a different place under config. I also tried specifying negative values for them, and it caused some weird effects, but didn't help with chart fog. There could be a see also: borderWidth link in there, for example.

vzakharov-rxnt avatar Nov 10 '22 11:11 vzakharov-rxnt