TileLayout - Pie Chart labels are cut off

[Stefan]

Hello,

we have a TileLayout with a Pie Chart inside. The Pie Chart is diaplaying labels. 

Unfortunately when the tile size is reduced, the labels are cut off (horizontally and vertically).

Is there any way to prevent this.

 

Example:

Reduce the width of the Pie Chart in this dojo: https://dojo.telerik.com/EsOWoqAL

[Georgi Denchev]

Hello Stefan,

Thank you for the provided dojo sample.

The are a couple of things you could do.

1. Reduce the distance between the chart and the labels when the tile is shrunk. You can modify the code in the resize of event like so:

if (rowSpan === "span 1" && chart) {
                  //chart.options.categoryAxis.labels.visible = false;
                 chart.options.seriesDefaults.labels.distance = 0; // set distance to 0
                 chart.redraw();
}

2. Change the label position to either "center" or "insideEnd" and the label would be located on the chart instead of outside.

seriesDefaults: {
    labels: {
        position: "insideEnd"
    }
}

Use whichever option you find more suitable for your project.

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

[Stefan]

Hello Georgi,

thank you for the examples.

The first one didn't really work for us though, at least when we tried it out in the dojo example.

But we went with the second one now. It might be a bit problematic when the pie segments are very small, but it seems to be the best solution for now.

Kind regards.

[Georgi Denchev]

Hi Stefan,

I am glad the solution worked.

I've updated the dojo using the first approach so you can examine it and see if it works better for your scenario. You need to set the labels distance in the configuration of the chart if you want it to appear immediately. Otherwise the effect will be visible only after you resize the tile.

Best Regards,
Georgi Denchev
Progress Telerik