Telerik Reporting R1 2017

How to: Setup a Pie Chart With No Overlapping Labels

A common problem related to Pie Charts is the overlapping of the labels that represent data points with relatively small values, adjacent to each other. By default, the layout engine will try to arrange the data labels so they do not overlap. When the bounds of two or more labels overlap, the engine will move them and their adjacent labels vertically, trying to find them a proper non-overlapping positions. During this rearrangement, a label can be moved aside from its original location, which may produce a hard to read chart. Additionally, if the plot area doesn't provide enough space and there are a lot of data points, the labels will overlap. To avoid label overlapping and keep your chart readability, you can setup the graph following the steps below.

The Pie chart uses BarSeries to represent the "pie slices". These series make use of the OutsideColumn value of the DataPointLabelAlignment property. When the alignment is set to OutsideColumn, the data point labels are aligned in two columns around the pie and their offset is controlled by the DataPointLabelOffset property. If the labels needs to be adjusted so they do not overlap, their position might not be aligned against the corresponding data point. In this case the data point connectors can be setup to provide visual aid to determine the relation between the label and a data point.

Setup a Pie Chart with no overlapping labels

  1. In Design view click on the chart series. The Properties Window will load the selected series properties.

  2. Change the DataPointLabelAlignment property to OutsideColumn.

  3. Set the value of the DataPointLabelOffset property to a value, providing enough offset from the pie, depending on the chart size (i.e. 30px).

  4. Make sure the DataPointLabelConnectorStyle has its Visible property set to true. Also, for better design experience, the connector is drawn only when the distance between the data point and the label is more than one line spacing , measured by its label's font. If needed, you can also adjust the connector offset using the Padding property. The Bottom represents the offset from the pie, and the Top represents the offset from the label. The Left and Right values are not respected. Additionally you can set the LineColor and LineStyle according to your needs.

Note Note

The OutsideColumn value of DataPointLabelAlignment property is respected only when applied on BarSeries using a Polar coordinate system. When applied on another series type or Cartesian coordinate system, the engine falls back to OutsideEnd value.

The algorithm that moves the data point labels, preventing them from overlapping, is activated only when the labels have their DataPointLabelAngle set to a multiple of 360 degrees (i.e. 0, 360, etc.).

The image below shows how a Pie Chart would look when the properties in question are set properly.

Outside Column Pie Chart 2

See Also