elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
366 stars 116 forks source link

Showing custom label inside Donut Chart #1451

Open kamalsivalingam opened 2 years ago

kamalsivalingam commented 2 years ago

Is your feature request related to a problem? Please describe. Question/Feature Request

Describe the solution you'd like Wanted to check on couple of things:

  1. Is there a way to show a custom label in the empty hole of a Donut chart. Like showing the total count, something like below image
  2. How do i reduce the width of the ring in the donut chart?

Checklist

markov00 commented 2 years ago

Hey @kamalsivalingam thanks for the request.

How do i reduce the width of the ring in the donut chart?

you can change the inner ring size with the config property emptySizeRatio.

Is there a way to show a custom label in the empty hole of a Donut chart. Like showing the total count, something like below

Actually no, we don't have configured such a feature yet. There is a set of constraints that make this tricky when we need to support edge cases, like large numbers or long text. Truncation, text in multi-line, font/size reduction are all possible solutions but those don't play well when you have multiple charts side by side (different font size could force the user reading it as more/less important than others.

Our suggestion is to use instead a different chart type, to make it more readable and cleaner. Using for example a stacked bar chart you can represent exactly the same information, with less wasted space and improved readability. You can put your text on top,bottom keeping the same font size, and handle the eventual long text the same way for every small multiple you have. Just as an example you can have 3 metrics at the same price of 1 donut chart :)

Screenshot 2021-11-18 at 12 34 23