Improving donut chart truncated labels

[Ron]

Hello, 

We are using a donut chart and have a problem with truncated labels, as explained below. 

Here are the chart settings:
type: 'donut',
holeSize: 76,
size: 10,
startAngle: 150,
labels: {
distance: 1,
margin: 0,
position: 'outsideEnd',
visible: true,
align: 'circle',
background: 'transparent',
font: `600 12px/12px Assistant,Helvetica Neue,Helvetica,Arial,sans-serif;`,
color: '#474E7A',
template: "#= kendo.toString(dataItem.percent, '\\#\\#,\\#.\\#') + '%\\n' + dataItem.category #"
},
connectors: false,
visual: e => {
const width = 18;
const space = 6;
const group = new kendo.drawing.Group();

const A = (Math.PI - Math.acos(((width / 2) + space) / 2 / e.radius) * 2) * 180 / Math.PI;

const geometry = new kendo.geometry.Arc([ e.center.x, e.center.y ], {
radiusX: e.radius - width / 2,
radiusY: e.radius - width / 2,
startAngle: e.startAngle + A,
endAngle: e.endAngle - A
});

const arc = new kendo.drawing.Arc(geometry, {
stroke: {
color: this.colorChart,
width: width,
lineCap: 'round',
lineJoin: 'round'
}
});

return group.append(arc);
},
highlight: {
visible: false
}
}

 

Our textual is RTL and some of the categories have long text titles.
For this reason we updated our dataItem.category so if the text it too long we will split it to two lines using \n
However there are still cases where the text exceeds the edge of the chart area - see for example the two lines marked in the attached image. 
In those two lines, the first line string length is 11 but actually only the first 8 characters are rendered (you can only see half of the 9th letter). The second line string length is 18 and only 10 is visible.


1) Can you advise us of a better way to handle the truncated labels text? For example we have no problem with using “…” at the end of the string when text is too long, but we are not familiar with a built in mechanism to do so
2) As you can see our template concatenates the dataItem.percent, new line (\n) and dataItem.category. We would like to use a different font styles so dataItem.percent will have one style and dataItem.category will have a different font size and color. How can we achieve this?

Thanks,

Ron.

[Alex Hajigeorgieva]

Hello, Ron,

There are different ways to take case of the way the labels look. If you want to use ellipsis, then you can see this how-to article:

https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/shorten-chart-labels

I used it in an RTL aligned chart here:

https://dojo.telerik.com/@bubblemaster/oxUlEZut

You can also configure the width of the chartArea and its margin to help with the alignment:

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

The series.labels.distance is another property that can be used for the donut chart and also the series.labels.padding.

Finally, there is an open issue which might be related with the behaviour you are experiencing. I have now raised its priority so it can be looked at sooner.

https://github.com/telerik/kendo-ui-core/issues/2192

Have a look at these options and let me know in case further assistance is required.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Ron]

Thanks Alex,
Your response tries to answer my first question (1) of the post and I will look into the different options you suggested.
however it seems like the second question remained unanswered, so I’ll repeat it here - please update us if there a way to achieve the following:

2) As you can see our template concatenates the dataItem.percent, new line (\n) and dataItem.category. We would like to use a different font styles so dataItem.percent will have one style and dataItem.category will have a different font size and color. How can we achieve this?

[Alex Hajigeorgieva]

Hi, Ron,

You are correct, I did miss the second question.

One way to change part of the labels look would be by using HTML as shown in this how-to article:

https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/html-in-axes-labels

Alternatively, you can provide a custom visual and use the Text drawing primitive:

https://dojo.telerik.com/@bubblemaster/UhaPeMah

visual: function(e){
  var draw = kendo.drawing;
  var geom = kendo.geometry;

  var position1 = new geom.Point(e.rect.origin.x, e.rect.origin.y);
  var text1 = new draw.Text(e.dataItem.category, position1, { font: "italic 1em 'Open Sans', sans-serif"});
  var position2 = new geom.Point(e.rect.origin.x, e.rect.origin.y+15);
  var text2 = new draw.Text(e.dataItem.value, position2, { font: "bold 1em 'Open Sans', sans-serif"});

  var group = new draw.Group();
  group.append(text1, text2);
  return group;
}

Kind Regards,
Alex Hajigeorgieva
Progress Telerik