Show Pie section values outer of the circular

[berry]

Sometimes the Pie section is too small to see the Percentage value so is it possible in this case show the values outer of the circular like in this picture.

[Martin Ivanov]

Hi Berry,

In order to achieve the desired effect you can use the SmartLabels feature of the chartview suite. You can find an example on how to use the smart labels strategy in the Pie Smart Labels demo.

Regards,
Martin
Telerik

[berry]

Please see the attach project file.

Although i added:

<telerik:PieChartSmartLabelsStrategy
    DisplayMode="SpiderAlignedOutwards"/>

The result is that i can see my label outside of the circle but without the draw lines like in this example (i try all the options in DisplayMode property):

http://docs.telerik.com/devtools/wpf/controls/radchartview/features/labels/smart-labels​

[berry]

The file is here: http://www.filedropper.com/newfolder_16

[Martin Ivanov]

Hi Berry,

In order to display the connectors of the labels you will need to set also the LabelConnectorsSettings property of the series.

<telerik:DoughnutSeries.LabelConnectorsSettings>
    <telerik:ChartSeriesLabelConnectorsSettings />
</telerik:DoughnutSeries.LabelConnectorsSettings>

Regards,
Martin
Telerik

[berry]

I probably missing something cause still nothing.

See my code:

<telerik:RadPieChart
    VerticalAlignment="Center"
    Name="pieChart"
    Palette="Windows8"
    Foreground="White"
    FontSize="16"
    HoverMode="FadeOtherItems" Margin="201,44,52,137" Height="503" Grid.ColumnSpan="2">
    <telerik:RadPieChart.SmartLabelsStrategy>
        <telerik:PieChartSmartLabelsStrategy
            DisplayMode="SpiderUnaligned" />
    </telerik:RadPieChart.SmartLabelsStrategy>
    <telerik:RadPieChart.Series>
        <telerik:PieSeries ItemsSource="{Binding PieData}" ShowLabels="True">
            <telerik:PieSeries.AngleRange>
                <telerik:AngleRange StartAngle="270" SweepAngle="360"/>
            </telerik:PieSeries.AngleRange>
            <telerik:PieSeries.LegendSettings>
                <telerik:DataPointLegendSettings/>
            </telerik:PieSeries.LegendSettings>
        </telerik:PieSeries>
        <telerik:DoughnutSeries>
            <telerik:DoughnutSeries.LabelConnectorsSettings>
                <telerik:ChartSeriesLabelConnectorsSettings />
            </telerik:DoughnutSeries.LabelConnectorsSettings>
        </telerik:DoughnutSeries>
    </telerik:RadPieChart.Series>
</telerik:RadPieChart>
<telerik:RadLegend
    x:Name="pieLegend"
    Foreground="White"
    MouseRightButtonDown="PieLegend_MouseRightButtonDown"
    Items="{Binding LegendItems, ElementName=pieChart}" Margin="549,44,10,344" RenderTransformOrigin="0.5,0.5" Grid.Column="1"/>

[Martin Ivanov]

Hello Berry,

In order to for the connectors to be displayed you will need to define their settings in a series that is populated with items and plotted  on the chart. In your case the label connectors settings should be defined in the PieSeries.

<telerik:RadPieChart
    VerticalAlignment="Center"
    Name="pieChart"
    Palette="Windows8"
    Foreground="White"
    FontSize="16"
    HoverMode="FadeOtherItems" Margin="201,44,52,137" Height="503" Grid.ColumnSpan="2">
    <telerik:RadPieChart.SmartLabelsStrategy>
        <telerik:PieChartSmartLabelsStrategy
            DisplayMode="SpiderUnaligned" />
    </telerik:RadPieChart.SmartLabelsStrategy>
    <telerik:RadPieChart.Series>
        <telerik:PieSeries ItemsSource="{Binding PieData}" ShowLabels="True">
            <telerik:PieSeries.AngleRange>
                <telerik:AngleRange StartAngle="270" SweepAngle="360"/>
            </telerik:PieSeries.AngleRange>
            <telerik:PieSeries.LegendSettings>
                <telerik:DataPointLegendSettings/>
            </telerik:PieSeries.LegendSettings>
             <telerik:PieSeries.LabelConnectorsSettings>
                <telerik:ChartSeriesLabelConnectorsSettings />
            </telerik:PieSeries.LabelConnectorsSettings>
        </telerik:PieSeries>
    </telerik:RadPieChart.Series>
</telerik:RadPieChart>
<telerik:RadLegend
    x:Name="pieLegend"
    Foreground="White"
    MouseRightButtonDown="PieLegend_MouseRightButtonDown"
    Items="{Binding LegendItems, ElementName=pieChart}" Margin="549,44,10,344" RenderTransformOrigin="0.5,0.5" Grid.Column="1"/>

Regards,
Martin
Telerik