Set Up a Pie Chart with no Overlapping Labels in the Graph

Environment

Product

Progress® Telerik® Reporting Graph Report Item

Description

How can I avoid the overlapping of the labels that represent data points with relatively small values and adjacent to each other in a Pie Chart?

Solution

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.

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 set up to provide visual aid to determine the relation between the label and a data point.

To avoid label overlapping:

1. In the Design view, click 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 (for example, 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 font.

   If needed, you can also adjust the connector offset by 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.

The OutsideColumn value of the DataPointLabelAlignment property is respected only when applied to BarSeries with a Polar coordinate system. When applied to another series type or a Cartesian coordinate system, the engine falls back to the 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, that is, 0, 360, and so on.

The image below shows how a Pie Chart after the suggested solution has been implemented.