Pie Chart Labels are Cut Off or Truncated

AUTHOR: Marin Bratanov

DATE POSTED: December 04, 2017

PROBLEM

Pie chart labels are truncated or cut off, so they are not fully visible. Happens more often when label text is long.

DESCRIPTION

By default, the pie chart label holds the value of the segment only and it is usually short enough to not cause issues.

Also, RadHtmlChart does not adjust size based on the label size.

SOLUTIONS

There are various approaches you can take to improve the appearance of the chart. For example, you can use one or more of the following:

• Move the long content to a tooltip instead of to the label.
• Truncate the label: https://www.telerik.com/support/kb/aspnet-ajax/chart-(html5)/details/truncate-labels-(set-max-length).
• Split the labels into several lines: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/multiline-labels/defaultcs.aspx.
• Change the LabelsAppearance.Position property to, for example, InsideEnd to provide more room for the label.
• Set a padding for the series that results in the desired appearance. For example:
  
  var radHtmlChartObject = $find("<%=PieChart1.ClientID %>"); //the standard script control object

  var kendoChart = radHtmlChartObject.get_kendoWidget(); //the Kendo widget

  kendoChart.options.series[0].padding = 100;

  kendoChart.refresh();
• Add Margin to the plot area to add some space to the SVG element. For example:
  
  <PlotArea>

      <Appearance>

          <TextStyle Margin="0 90 0 0" />

      </Appearance>