How to change DoughnutSeries labelconnectors and legend?

[Psyduck]

Hello.

I want to customize the DoughnutSeries chart label and legend.

 

1. (Violet square) I succeeded in losing the text when the label value is 0.

However, I do not know how to delete it from the connector part.

 

2. (Orange square) I want to make the legend disappear for a value of 0, is it possible?

 

3. (Blue square) If you adjust the window size when aligning the pie chart to the left, the chart size is fixed.

However, if you set Stretch, the chart is shown in the center and the left and right margins increase. Is there a solution?

 

<*.xaml>

<Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <telerik:RadPieChart Grid.Column="0" x:Name="connectionChart" >
                            <telerik:RadPieChart.SmartLabelsStrategy>
                                <telerik:PieChartSmartLabelsStrategy DisplayMode="SpiderAlignedOutwards"/>
                            </telerik:RadPieChart.SmartLabelsStrategy>

                            <telerik:RadPieChart.Series>
                                <telerik:DoughnutSeries ItemsSource="{Binding ConnectionPieData}" ClipToPlotArea="False" ValueBinding="Value"
                                                        RadiusFactor="0.7" InnerRadiusFactor="0.25" ShowLabels="True">
                                    <telerik:PieSeries.LabelDefinitions>
                                        <telerik:ChartSeriesLabelDefinition>
                                            <telerik:ChartSeriesLabelDefinition.Template>
                                                <DataTemplate>
                                                    <StackPanel Orientation="Vertical">
                                                        <TextBlock Text="{Binding Value, Converter={StaticResource ValueZeroConverter}}"/>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </telerik:ChartSeriesLabelDefinition.Template>
                                        </telerik:ChartSeriesLabelDefinition>
                                    </telerik:PieSeries.LabelDefinitions>
                                    <telerik:DoughnutSeries.SliceStyles>
                                        <Style TargetType="Path">
                                            <Setter Property="Fill" Value="{Binding DataItem.Color}"/>
                                        </Style>
                                    </telerik:DoughnutSeries.SliceStyles>
                                    <telerik:PieSeries.LegendSettings>
                                        <telerik:DataPointLegendSettings TitleBinding="Title"/>
                                    </telerik:PieSeries.LegendSettings>
                                    <telerik:PieSeries.LabelConnectorsSettings>
                                        <telerik:ChartSeriesLabelConnectorsSettings/>
                                    </telerik:PieSeries.LabelConnectorsSettings>
                                </telerik:DoughnutSeries>
                            </telerik:RadPieChart.Series>
                        </telerik:RadPieChart>

                        <telerik:RadLegend Grid.Column="1" Items="{Binding ElementName=connectionChart, Path=LegendItems}"
                                           HorizontalAlignment="Left" VerticalAlignment="Center"/>
                    </Grid>

 

<*.xaml.cs ( Value Zero Converter) >

public class ValueZeroConverter : IValueConverter
   {
       public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
       {
           var slicesValue = double.Parse(value.ToString());
           if (slicesValue == 0)
           {
               return string.Empty;
           }
           return string.Format("{0:N} %", slicesValue);
       }

       public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
       {
           throw new NotImplementedException();
       }
   }

 

<*.model>

public class ReportGraphModel : ModelBase
{
    public string Title { get; set; }
    public double Value { get; set; }
    public Brush Color { get; set; }
}

public class MainViewModel
{
...

  ConnectionPieData = new ObservableCollection<ReportGraphModel>
  {
   new ReportGraphModel { Title = "Error", Value =error, Color = new SolidColorBrush(Colors.Red)},
   new ReportGraphModel { Title = "Exception", Value =exception, Color = new SolidColorBrush(Colors.Violet)},
   new ReportGraphModel { Title = "Normal", Value =normal, Color = new SolidColorBrush(Colors.Green)},
  };
}

 

 

Thanks.

[Martin Ivanov]

Hello KIM,

To remove the connector part of the label with the 0 value (where the label is empty text), you can override the GetLabelConnector method of the corresponding chart series and return an empty collection there. You can see how to override the method in the following KB article.

To hide the legend item for the 0 value, you can subscribe to the Loaded event when the chart's LegendItems collection is already populated. Then, you can remove the corresponding LegendItem instance from the collection.

About the size of the chart, I am not sure how you expect to behave. Can you explain this or show some drawings of the expected result? In the meantime note that the RadPieChart control is basically an empty canvas with a circle (the pie or doughnut) drawn in the middle. The size of the circle is controlled via the RadiusFactor property. When you resize the chart to a figure that is not a square empty spaces will occur on the left, right, top or bottom. In your case, when you align the chart to the left, its Width fits the doughnut's size (the content of the control) and you won't see the big empty spaces. One way to get a fixed chart size is to set its Width and Height properties.

Regards,
Martin Ivanov
Progress Telerik

[Psyduck]

Hello.

 

1. I also checked the linked example and the pie chart example. But the examples over there are those outside the Serise.

I searched for a solution using Serise doughnut sizein PieChart but couldn't fix it.

<*.xaml.cs>

public class CustomSeries : Telerik.Windows.Controls.ChartView.★★★★
{
  protected override List<Point> GetLabelConnector(Telerik.Windows.Controls.ChartView.ChartSeriesLabelPositionInfo info)
  {
     var label = info.DataPoint.Label.ToString();
     if (string.IsNullOrEmpty(label) || string.IsNullOrWhiteSpace(label))
     {
       return new List<Point>() { new Point(), new Point() };
     }
     return base.GetLabelConnector(info);
  }
}

I put PieSeries and DoughnutSeries inside the star shape, but it's unclear what to put.

 

<*.xaml>

Resource <local:CustomSeries x:Key="CustomSeries"/>

 

<telerik:RadPieChart >

  <telerik:RadPieChart.Series>

    <telerik:DoughnutSeries ItemsSource="{Binding }"  ValueBinding="Value" ShowLabels="True"

               LabelConnectorsSettings="{StaticResource CustomSeries}" <<< ☆ Error  >

        <telerik:PieSeries.LabelDefinitions>

         ...

        </telerik:PieSeries.LabelDefinitions>

 

        <local:CustomSeries>  <<< ☆ Error

          <local:CustomSeries.LabelConnectorsSettings>

            <telerik:ChartSeriesLabelConnectorsSettings/>

         </local:CustomSeries.LabelConnectorsSettings>

        </local:CustomSeries>

 

    </telerik:DoughnutSeries>    

 

        <local:CustomSeries>  <<< ☆ If i put outside, not work.
          <local:CustomSeries.LabelConnectorsSettings>
            <telerik:ChartSeriesLabelConnectorsSettings/>
         </local:CustomSeries.LabelConnectorsSettings>
        </local:CustomSeries>

  </telerik:RadPieChart.Series>

</telerik:RadPieChart>

The above sources are not one source, but one by one, and the error appears.

 

 

2. Do you mean binding the legend to remove the item? I didn't understand. Item source does not exist.

     <telerik:RadLegend Items="{Binding ElementName=pieChart, Path=LegendItems}"/>

 

3.I am trying to dynamically change the size of the chart, not the size of the doughnut.

If I set the height and width, isn't it fixed? Please refer to the image

 

[Martin Ivanov]

Hello KIM,

The custom series in your case may look like this:

public class CustomDoughnutSeries : DoughnutSeries
{
	protected override List<Point> GetLabelConnector(ChartSeriesLabelPositionInfo info)
	{
		var dataPoint = (PieDataPoint)info.DataPoint;

		if (dataPoint.Value == 0)
		{
			return new List<Point>() { new Point(), new Point() };
		}

		return base.GetLabelConnector(info);
	}
}

To use this you will need to replace the whole DoughnutSeries in XAML with the custom implementation, not only the LabelConnectorsSettings. Here is an example:

<telerik:RadPieChart>
	<local:CustomDoughnutSeries>
		<!-- other XAML settings here -->
		<local:CustomDoughnutSeries.LabelConnectorsSettings>
			<telerik:ChartSeriesLabelConnectorsSettings />
		</local:CustomDoughnutSeries.LabelConnectorsSettings>
	</local:CustomDoughnutSeries>
</telerik:RadPieChart>

For the legend, depending on the approach you are using to populate the RadLegend control you can use a different methods for removing the item for the 0 data point from the legend. If you use data binding the to the LegendSettings of the chart, you can remove the corresponding item. For example:

private void RadPieChart_Loaded(object sender, RoutedEventArgs e)
{
	LegendItem errorItem = this.pieChart.LegendItems.FirstOrDefault(x => x.Title == "Error");
	if (errorItem != null)
	{
		this.pieChart.LegendItems.Remove(errorItem);
	}
}

About the chart's size, the behavior described in your original post is expected. Setting the HorizontalAlignment of an element to Left or Right in WPF will fix its position to the corresponding side. Then the element will measure with a fixed size if defined or based on content inside the element. In the second case, the width of the control will be as much as its children need to fit. Because the chart doesn't have a fixed size and the doughnut doesn't know how big it should be in this situation, the MinWidth (of 100px) of the control kicks-in. To achieve your requirement and achieve dynamic sizing, you will need to use Stretch HorizontalAlignment. Left, Right or Center alignments doesn't allow you to resize the element dynamically on resize of the window or the view.

Regards,
Martin Ivanov
Progress Telerik

[Psyduck]

Hello.

My skills were inexperienced, so I couldn't solve it even if I got the number of all cases.

 

<local:CustomDoughnutSeries x:Key="CustomDoughnutSeries" />
<Grid>
    <telerik:RadPieChartx:Name="pieChart" >
        <telerik:RadPieChart.SmartLabelsStrategy>
            <telerik:PieChartSmartLabelsStrategy DisplayMode="SpiderAlignedOutwards"/>
        </telerik:RadPieChart.SmartLabelsStrategy>

        <local:CustomDoughnutSeries ItemsSource="{Binding ChartData}" ClipToPlotArea="False" ValueBinding="Value"
                                    RadiusFactor="0.7" InnerRadiusFactor="0.25" ShowLabels="True"
                                    >

            <local:CustomDoughnutSeries.LabelDefinitions>
                <telerik:ChartSeriesLabelDefinition>
                    <telerik:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Value, Converter={StaticResource ValueZeroConverter}}"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerik:ChartSeriesLabelDefinition.Template>
                </telerik:ChartSeriesLabelDefinition>
            </local:CustomDoughnutSeries.LabelDefinitions>

            <local:CustomDoughnutSeries.SliceStyles>
                <Style TargetType="Path">
                    <Setter Property="Fill" Value="{Binding DataItem.Color}"/>
                </Style>
            </local:CustomDoughnutSeries.SliceStyles>

            <local:CustomDoughnutSeries.LabelConnectorsSettings>
                <telerik:ChartSeriesLabelConnectorsSettings/>
            </local:CustomDoughnutSeries.LabelConnectorsSettings>

            <local:CustomDoughnutSeries.LegendSettings>
                <telerik:DataPointLegendSettings TitleBinding="Title"/>
            </local:CustomDoughnutSeries.LegendSettings>
        </local:CustomDoughnutSeries>

        </telerik:RadPieChart>

        <telerik:RadLegend Items="{Binding ElementName=pieChart, Path=LegendItems}"
                        HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>

 

 

1. I deleted the unnecessary <RadPieChart.Series>, changed the PieSeries, etc., which was not uniform, and put local in all places.

This does not print an error! However, Values do not exist in the visible chart, but values do exist. What is the problem?

 

2. This method is known as a direct loading method.

I want to click the button to put the data in the chart and remove the legend if there is no value.

The legend is bound to the x:name chart, could you control it by subtracting it with the mvvm pattern?

 

I hope you help again. Thanks.

[Martin Ivanov]

Hello KIM,

I've reviewed your requirements again and I think there is an easier approach to make the customizations you need. Basically, you want to remove 0 values from the pie, its connectors and from the legend. In this case, the most convenient approach would be to remove the 0 values from the ItemsSource of the series instead of creating several different customizations. I've attached a small example showing this approach. I hope this fits better in your scenario.

Regards,
Martin Ivanov
Progress Telerik