Pie chart length of the connectors

[Dan]

I have a requirement to print a pie chart on a small area. I modified most of the fonts, margins and paddings to make it fit and I got to the connectors. Is there a way to modify the length of connectors?

The problem is that some of the labels are outside of the chart and I was hopping that if I reduce the length of the connectors I can make it fit.

https://dojo.telerik.com/aPuLiPiB

You can see in the above dojo that some categories are outside of the chart area and some are overlaid on the legend

The reason I need to display the chart on that small area is because it needs to be printed and that is the allocated area on the printed paper.

[Anton Mironov]

Hello Dan,

Thank you for the dojo example and details provided.

In order to achieve the desired behavior, I would recommend using the "series.connectors" property of the Kendo UI Chart. Set the width as follows:

$("#chart").kendoChart({
  series: [{
    type: "pie",
    labels: {
      visible: true
    },
    connectors: {
      width: 4,
      color: "red"
    },
    data: [1 , 2]
  }]
});

Here is an example:

• https://dojo.telerik.com/@anton.mironov/InoHipAH

Give the approach above a try and let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Dan]

Hi Anton,

The suggested property does not work. It seems that width refers to something else. I tried it and it does not work. It made the connector line thicker. It seems that even the documentation is wrong about this.

[Anton Mironov]

Hello Dan,

Apologize for the misunderstanding.

In order to achieve the desired behavior, try the "padding" of the series connectors.

Here is an example:

• https://dojo.telerik.com/@anton.mironov/ogULANog

I hope the approach above is a working solution for the case.

Best Regards,
Anton Mironov
Progress Telerik

[Dan]

Hi Anton
Again the "padding" property did not help. I tried to play around with it and it did not help. I made it 20 but labels were still outside of the chart and did not look ok and If I made it 2 the connectors were even longer.

Honestly I do not understand their use but it does not help.

[Nikolay]

Hello Dan,

To overcome this labels situation I can suggest changing their position to either "center" or "outsideEnd":

series: [{
              type: "pie",
              startAngle: 150,
              labels: {
                background: "transparent",
                font: "5px Arial, Helvetica, sans-serif",
                template: "#= category#",
                visible: true,
                align: "column",
                position: "insideEnd"
              },

• https://dojo.telerik.com/aPuLiPiB/5

Let me know if this helps.

Regards,
Nikolay
Progress Telerik

[Dan]

Hi Nikolay,
I tried both "center" and "insideEnd" and in both cases its not acceptable cause the 7th, 8th and 9th categories have small values and their text is overlapping and you can not see their labels.

[Nikolay]

Hi Dan,

Another thing I can suggest is setting margin to the whole chart area. This way the labels will not be cut from the export:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/chartarea#chartareamargin

Here is a Dojo demonstrating this:

https://dojo.telerik.com/ITokudib

Let me know if this helps!

[Dan]

Hi Nikolay,

The default of the margins seems to be 5 and settings it to 0 does not help. I even removed the legend and still the labels are outside of chart and you can not see them. Also now the labels are overlaid on top of the title.

https://dojo.telerik.com/aPuLiPiB/9

[Nikolay]

Hi Dan,

My idea is to send a margin big enough (for example 40) so the labels fit within the Chart and respectively on the export:

https://dojo.telerik.com/aPuLiPiB/11

Is this fine for the current use case?

Regards,

Nikolay

[Dan]

Hi Nikolay,

I did not think to make margin big to influence the labels. However in your dojo you can see that the title is now not fully visible cause the connectors are over it. Because this will be physically printed on paper the title has to be fully visible. The title has to start from the most below label or connector line.

[Nikolay]

Hi Dan,

Another approach I can think of is reducing the distance of the labels:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.labels.distance

Here is the new Dojo: https://dojo.telerik.com/aPuLiPiB/13

I hope this satisfies the scenario.

Regards,

Nikolay