Show percentage and Label in a pie chart

[Nino]

Hi

I have a pie chart and I can show the percentage or a name. But I would like to show the name and the percentages. Is there any possibility to do this?

Heres my Code:

<telerikChart:RadPieChart x:Name="SpreadingChart" Palette="Warm" SelectionPalette="WarmSelected">

    <telerikChart:RadPieChart.Behaviors>
        <telerikChart:ChartSelectionBehavior />
    </telerikChart:RadPieChart.Behaviors>

    <telerikChart:PieSeries SelectedPointOffset="0" ItemsSource="{Binding SpreadingMedicines, Mode=TwoWay}" ShowLabels="True">

        <telerikChart:PieSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Amount"/>
        </telerikChart:PieSeries.ValueBinding>

        <telerikChart:PieSeries.LabelDefinitions>
            <telerikChart:ChartSeriesLabelDefinition>
                <telerikChart:ChartSeriesLabelDefinition.Binding>
                    <telerikChart:PropertyNameDataPointBinding PropertyName="Label" />
                </telerikChart:ChartSeriesLabelDefinition.Binding>
            </telerikChart:ChartSeriesLabelDefinition>
        </telerikChart:PieSeries.LabelDefinitions>
    </telerikChart:PieSeries>
</telerikChart:RadPieChart>

private string label;
public string Label
{
    get { return label; }
    set
    {
        if (label != value)
        {
            label = value;
            NotifyPropertyChanged("Label");
        }
    }
}

private double amount;
public double Amount
{
    get { return amount; }
    set
    {
        if (amount != value)
        {
            amount = value;
            NotifyPropertyChanged("Amount");
        }
    }
}

[Todor]

Hello Nino,

Thank you for your question. Here's how you can add custom labels that include more than one field:

<telerikChart:PieSeries.LabelDefinitions>
    <telerikChart:ChartSeriesLabelDefinition>
        <telerikChart:ChartSeriesLabelDefinition.Template>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Label}"/>
                    <TextBlock Text="{Binding Value}"/>
                    <TextBlock Text="{Binding Percent, StringFormat=\{0:N\} %}"/>
                </StackPanel>
            </DataTemplate>
        </telerikChart:ChartSeriesLabelDefinition.Template>
    </telerikChart:ChartSeriesLabelDefinition>
</telerikChart:PieSeries.LabelDefinitions>

Let me know if I can assist you further.

Regards,
Todor
Telerik

[Nino]

Hi Todor

Thanks for your answer. I changed my code to this:

<telerikChart:RadPieChart x:Name="SpreadingChart" Palette="Warm" SelectionPalette="WarmSelected">

    <telerikChart:RadPieChart.Behaviors>
        <telerikChart:ChartSelectionBehavior />
    </telerikChart:RadPieChart.Behaviors>

    <telerikChart:PieSeries SelectedPointOffset="0" ItemsSource="{Binding SpreadingMedicines, Mode=TwoWay}" ShowLabels="True">

        <telerikChart:PieSeries.ValueBinding>
            <telerikChart:PropertyNameDataPointBinding PropertyName="Amount"/>
        </telerikChart:PieSeries.ValueBinding>

        <telerikChart:PieSeries.LabelDefinitions>
            <telerikChart:ChartSeriesLabelDefinition>
                <telerikChart:ChartSeriesLabelDefinition.Template>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Label}"/>
                            <TextBlock Text="{Binding Percent, StringFormat=\{0:N\} %}"/>
                        </StackPanel>
                    </DataTemplate>
                </telerikChart:ChartSeriesLabelDefinition.Template>
            </telerikChart:ChartSeriesLabelDefinition>
        </telerikChart:PieSeries.LabelDefinitions>
    </telerikChart:PieSeries>
</telerikChart:RadPieChart>

But instead of showing me the Label with the percentage, there are two percentages on each piece. What do I wrong?



Reagrds

Nino

[Ivo]

Hello Nino,
The reason is that you use binding to "Amount".
Please, remove the binding and try again:

        <telerikChart:PieSeries.ValueBinding>

            <telerikChart:PropertyNameDataPointBinding PropertyName="Amount"/>

        </telerikChart:PieSeries.ValueBinding>

Regards,
Ivo
Telerik

[Nino]

I'm a bit confused. I thought I set Value to create the basic chart with the binding and the text who shall be printed on every slice with the label defintion. Now you say I have to remove the binding. But if I remove the binding the whole chart won't be rendered and the page is just black. (even without the "no data to plot" - Label).

<telerikChart:RadPieChart x:Name="SpreadingChart" Palette="Warm" SelectionPalette="WarmSelected">

    <telerikChart:RadPieChart.Behaviors>
        <telerikChart:ChartSelectionBehavior />
    </telerikChart:RadPieChart.Behaviors>

    <telerikChart:PieSeries SelectedPointOffset="0" ItemsSource="{Binding SpreadingMedicines, Mode=TwoWay}" ShowLabels="True">

        <telerikChart:PieSeries.LabelDefinitions>
            <telerikChart:ChartSeriesLabelDefinition>
                <telerikChart:ChartSeriesLabelDefinition.Template>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Label}"/>
                            <TextBlock Text="{Binding Amount, StringFormat=\{0:N\} %}"/>
                        </StackPanel>
                    </DataTemplate>
                </telerikChart:ChartSeriesLabelDefinition.Template>
            </telerikChart:ChartSeriesLabelDefinition>
        </telerikChart:PieSeries.LabelDefinitions>

    </telerikChart:PieSeries>
</telerikChart:RadPieChart>

Is now something wrong with the palette definition or does he don't find any data now?



Regards

Nino

[Ivo]

Hello Nino,
We've prepared a sample project.
Please, find it attached and test its behavior.

Regards,
Ivo
Telerik

[Nino]

Hi Ivo

thanks for the sample. So the difference to my code is that you've added 3 static datapoints. Does that mean that I cannot bind a list to the chart and create the datapoints dynamicly if I want to add custom labels? Or how do I have to do this binding?



Regards

Nino

[Nino]

I did a work around and add the datapoints in the code behind:

           

var pieSeries = SpreadingChart.Series.First();
foreach (var medicine in App.StatisticViewModel.SpreadingMedicines)
{
    pieSeries.DataPoints.Add(new PieDataPoint {Label = medicine.Label, Value = medicine.Amount });
}
SpreadingChart.Series.Insert(0, pieSeries);

<telerikChart:RadPieChart x:Name="SpreadingChart" Palette="Warm" SelectionPalette="WarmSelected">

    <telerikChart:RadPieChart.Behaviors>
        <telerikChart:ChartSelectionBehavior />
    </telerikChart:RadPieChart.Behaviors>

    <telerikChart:PieSeries SelectedPointOffset="0" x:Name="PieSeries" ShowLabels="True">


        <telerikChart:PieSeries.LabelDefinitions>
            <telerikChart:ChartSeriesLabelDefinition>
                <telerikChart:ChartSeriesLabelDefinition.Template>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Label}"/>
                            <TextBlock Text="{Binding Percent, StringFormat=\{0:N\} %}"/>
                        </StackPanel>
                    </DataTemplate>
                </telerikChart:ChartSeriesLabelDefinition.Template>
            </telerikChart:ChartSeriesLabelDefinition>
        </telerikChart:PieSeries.LabelDefinitions>

    </telerikChart:PieSeries>
</telerikChart:RadPieChart>

But I still think it would be much nicer and cleaner with a binding.



Regards

Nino

[Todor]

Hi Nino,

When you use the data binding approach, a new PieDataPoint is created for each of the objects from your ViewModel. By default, their label is the value of the percentage, which explains why you see the percentage twice. On the other hand the information from your data object can be accessed through the DataItem property of the PieDataPoint. This means that if you want to display the Label from your item, you need to bind to DataItem.Label, instead of just Label:

<TextBlock Text="{Binding DataItem.Month}"/>

I have attached a new sample which demonstrates how to use the LabelDefinitions in the context of the DataBinding scenario.

I hope this information helps.

Regards,
Todor
Telerik