Smart Labels

For charts that have many data points or data points with values close to one another, labels tend to collide making readability a problem. The Smart Labels feature automatically re-aligns labels making each labeled value stand out clearly. You are also able to configure the settings for the Smart Labels. This topic will explain how to:

• Enable/Disable Smart Labels feature

• Configure the Smart Labels feature

Enable/Disable Smart Labels feature

The Smart Labels feature can be enabled/disabled through the SmartLabelsEnabled of the ChartArea property.

<telerik:RadChart x:Name="radChart"> 
    <telerik:RadChart.DefaultView> 
        <telerik:ChartDefaultView> 
            <telerik:ChartDefaultView.ChartArea> 
                <telerik:ChartArea SmartLabelsEnabled="True" /> 
            </telerik:ChartDefaultView.ChartArea> 
        </telerik:ChartDefaultView> 
    </telerik:RadChart.DefaultView> 
</telerik:RadChart> 

this.radChart.DefaultView.ChartArea.SmartLabelsEnabled = true; 

Me.radChart.DefaultView.ChartArea.SmartLabelsEnabled = True 

Configure the Smart Labels feature

You are able to configure the setting of the Smart Labels feature by using the LabelSettings property of the series definitions. For the most series this property is of type LabelSettings. For the BarSeriesDefinition it is of type BarLabelSettings and for the PieSeriesDefinition and the DoughnutSeriesDefinition it is of type RadialLabelSettings.

LabelSettings

The LabelSettings class is used for all of the RadChart series definitions except for the Bar, Pie and Doughnut series. It allows you to control the following:

• Distance - the distance between the label and the respective point.

• ShowConnectors - indicates whether lines should be visualized between the points and the labels.

<telerik:RadChart x:Name="radChart"> 
    <telerik:RadChart.DefaultSeriesDefinition> 
        <telerik:LineSeriesDefinition> 
            <telerik:LineSeriesDefinition.LabelSettings> 
                <telerik:LabelSettings Distance="10" ShowConnectors="True" /> 
            </telerik:LineSeriesDefinition.LabelSettings> 
        </telerik:LineSeriesDefinition> 
    </telerik:RadChart.DefaultSeriesDefinition> 
    <telerik:RadChart.DefaultView> 
        <telerik:ChartDefaultView> 
            <telerik:ChartDefaultView.ChartArea> 
                <telerik:ChartArea SmartLabelsEnabled="True" /> 
            </telerik:ChartDefaultView.ChartArea> 
        </telerik:ChartDefaultView> 
    </telerik:RadChart.DefaultView> 
</telerik:RadChart> 

LabelSettings settings = new LabelSettings(); 
settings.Distance = 10; 
settings.ShowConnectors = true; 
LineSeriesDefinition lineSeries = new LineSeriesDefinition(); 
lineSeries.LabelSettings = settings; 
this.radChart.DefaultSeriesDefinition = new LineSeriesDefinition(); 
this.radChart.DefaultView.ChartArea.SmartLabelsEnabled = true; 

Dim settings As New LabelSettings() 
settings.Distance = 10 
settings.ShowConnectors = True 
Dim lineSeries As New LineSeriesDefinition() 
lineSeries.LabelSettings = settings 
Me.radChart.DefaultSeriesDefinition = New LineSeriesDefinition() 
Me.radChart.DefaultView.ChartArea.SmartLabelsEnabled = True 

BarLabelSettings

The BarLabelSettings class inherits the LabelSettings class. The additional thing which it allows you to control is the LabelDisplayMode. It allows you to specify where to place the label relatively to the bar object. It can be set to one of the following values:

• Auto - automatically chooses the bes position for the label.

• Inside - the labels are placed inside the bar, near the top (or bottom for negative values).

• MidPoint - the labels are placed in the middle of the bar.

• Outside - the labels are placed over the bar (or below it for negative values).

<telerik:RadChart x:Name="radChart"> 
    <telerik:RadChart.DefaultSeriesDefinition> 
        <telerik:BarSeriesDefinition> 
            <telerik:BarSeriesDefinition.LabelSettings> 
                <telerik:BarLabelSettings Distance="10" 
                                          LabelDisplayMode="Outside" 
                                          ShowConnectors="False" /> 
            </telerik:BarSeriesDefinition.LabelSettings> 
        </telerik:BarSeriesDefinition> 
    </telerik:RadChart.DefaultSeriesDefinition> 
    <telerik:RadChart.DefaultView> 
        <telerik:ChartDefaultView> 
            <telerik:ChartDefaultView.ChartArea> 
                <telerik:ChartArea SmartLabelsEnabled="True" /> 
            </telerik:ChartDefaultView.ChartArea> 
        </telerik:ChartDefaultView> 
    </telerik:RadChart.DefaultView> 
</telerik:RadChart> 

BarLabelSettings barSettings = new BarLabelSettings(); 
barSettings.Distance = 10; 
barSettings.LabelDisplayMode = LabelDisplayMode.Outside; 
barSettings.ShowConnectors = false; 
BarSeriesDefinition barSeries = new BarSeriesDefinition(); 
barSeries.LabelSettings = barSettings; 
this.radChart.DefaultSeriesDefinition = barSeries; 
this.radChart.DefaultView.ChartArea.SmartLabelsEnabled = true; 

Dim barSettings As New BarLabelSettings() 
barSettings.Distance = 10 
barSettings.LabelDisplayMode = LabelDisplayMode.Outside 
barSettings.ShowConnectors = False 
Dim barSeries As New BarSeriesDefinition() 
barSeries.LabelSettings = barSettings 
Me.radChart.DefaultSeriesDefinition = barSeries 
Me.radChart.DefaultView.ChartArea.SmartLabelsEnabled = True 

RadialLabelSettings

The RadialLabelSettings class inherits the LabelSettings class. In addition, it allows you to control the following:

• LabelOffset - the position of the label relative to the Pie/Doughnut radius. Set it to 0.5 to place the label in the center of the slice. By setting it to a value of 2.0, the label will be placed at distance twice as the radius form the center.

• SpirderModeEnabled - indicates whether the Spider mode is enabled or not. In this mode the labels are ordered around the Pie/Doughnut as spider legs. Combine it with ShowConnectors for a greater effect.

<telerik:RadChart x:Name="radChart"> 
    <telerik:RadChart.DefaultSeriesDefinition> 
        <telerik:PieSeriesDefinition> 
            <telerik:PieSeriesDefinition.LabelSettings> 
                <telerik:RadialLabelSettings ShowConnectors="True" SpiderModeEnabled="True" /> 
            </telerik:PieSeriesDefinition.LabelSettings> 
        </telerik:PieSeriesDefinition> 
    </telerik:RadChart.DefaultSeriesDefinition> 
    <telerik:RadChart.DefaultView> 
        <telerik:ChartDefaultView> 
            <telerik:ChartDefaultView.ChartArea> 
                <telerik:ChartArea SmartLabelsEnabled="True" /> 
            </telerik:ChartDefaultView.ChartArea> 
        </telerik:ChartDefaultView> 
    </telerik:RadChart.DefaultView> 
</telerik:RadChart> 

RadialLabelSettings radialSettings = new RadialLabelSettings(); 
radialSettings.SpiderModeEnabled = true; 
radialSettings.ShowConnectors = true; 
PieSeriesDefinition pieSeries = new PieSeriesDefinition(); 
pieSeries.LabelSettings = radialSettings; 
this.radChart.DefaultSeriesDefinition = pieSeries; 
this.radChart.DefaultView.ChartArea.SmartLabelsEnabled = true; 

Dim radialSettings As New RadialLabelSettings() 
radialSettings.SpiderModeEnabled = True 
radialSettings.ShowConnectors = True 
Dim pieSeries As New PieSeriesDefinition() 
pieSeries.LabelSettings = radialSettings 
Me.radChart.DefaultSeriesDefinition = pieSeries 
Me.radChart.DefaultView.ChartArea.SmartLabelsEnabled = True 

Here is a snapshot of the result.