Show Pie section values outer of the circular

7 posts, 0 answers
  1. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 27 Jul 2015 Link to this post

    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.

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 27 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 28 Jul 2015 in reply to Martin Link to this post

    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​

  5. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 28 Jul 2015 in reply to berry Link to this post

    The file is here: http://www.filedropper.com/newfolder_16
  6. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 28 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 28 Jul 2015 in reply to Martin Link to this post

    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"/>

  8. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 28 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready