Fixed width donut chart band

[David]

Hello,

How do I configure the width of the donut chart circle?  The default one created by Kendo UI is very thick, but I would like a thinner one.  Attached is a screen shot of what I see when I use the donut chart as-is.  Also attached is a thinner donut chart image which is what I'm trying to achieve.  I tried to use the example for doing this with a bar chart, but it resulted in nothing showing up for the donut chart.

Thanks in advance,
David

[Tsvetomir]

Hi David,

The width of the inner circle of the donut chart could be modified by the holeSize property. Here is an example of how to set it:

seriesDefaults: {
  type: "donut",
  holeSize:100,
},

Here is the corresponding Dojo sample:

https://dojo.telerik.com/ESoqoDuG


Kind regards,
Tsvetomir
Progress Telerik

[Kevin]

Hi Tsvetomir,

I've seen this holeSize example as a solution in a few places, but I'm wondering if there's a more response solution that takes into account the size of the actual donut itself.  For example, your holeSize:100 only works when the donut itself is large enough to support that value. This example shows that holeSize in a scenario where the size of the donut is much smaller:

https://dojo.telerik.com/ESoqoDuG/16 

We often have responsive charts, where the size of the donut varies, and if we consistently want a thin donut circle (sometimes aesthetic, sometimes to place text in the middle), then the holeSize solution often presents a challenge.

When setting holeSize, you don't yet know the size of the actual donut, so we've tried calculating it roughly based on the width/height of the container. But this is pretty brittle we've found, is there any way to set the holeSize as a percentage of the donut radius itself? Or is there some way to use the "visual" function on the series to calculate the hole size at that time based on the radius of the donut?

[Tsvetomir]

Hi David,

The width of the inner hole of the donut has to be set in exact pixels. Of course, you could calculate it to be proportionate to the width of the element from which the chart is initialized and pass it to the holeSize property dynamically:

https://dojo.telerik.com/UcAdAgUk

 

Kind regards,
Tsvetomir
Progress Telerik

[Kevin]

For anyone else coming across this, I thought I would post an almost-complete solution to calculate the hole size based on the radius of the donut itself.

series: [{
  type:'donut',
  ...
  visual: function (e) {
    // Make the holesize 5 pixels less than donut radius
    this.holeSize = e.radius - 5;
  }
}],
render: function (e) {
  e.sender._sourceSeries[0].holeSize = this.holeSize;
}

This works because the series visual(...) function is called first to create the donut visual for rendering. You can save your holesize based on the size of the donut, and then when render(...) is called you can set the series hole size.

The problem with this solution is that if the chart has no data, the series visual(...) function is never called first, but the render(...) obviously is. The hole size is set on the first render(...) so even if you update the datasource and set the holesize in subsequent renderings, it doesn't change the holesize, it needs to be set on the first render.

In my case, the chart is rendered and then the data is updated on a timer, sometimes no data, sometimes data, and so it's a little unreliable for me. I could: (a) render the chart with default data first to set the hole size, then wipe it out.  (b) find a way to include a second series with some default values and hide that donut from the chart/legend. (c) calculate the holesize based on the render suface size (or its container as Tsvetomir suggests above).

I'm probably going with (c).

    

[Tsvetomir]

Hi Kevin,

The visual function exposed would be suitable for the customization of the separate series. Hence, it will be triggered multiple times.

It is important, also, to point out that after modifying the "holeSize" property as a JavaScript property, it will not get immediately applied to the chart. You would have to redraw it with the new value.

In general, calculating the hole size based on the width of the element of the diagram is a sustainable approach as the actual element is relatively calculated to the HTML element.

 

Best regards,
Tsvetomir
Progress Telerik