Category / Section
How to wrap the text in the WPF Chart legend?
1 min read
This KB explains How do I make a text wrapping for each item in the chart legend?
The following steps can be used to wrap the text of the legend label using the ItemTemplate property of the ChartLegend class.
Step 1: Create a DataTemplate look like legend item by using the StackPanel, Rectangle, and TextBlock. Then, set the TextWrapping to Wrap for TextBlock in the template like the following code example.
XAML:
<syncfusion:SfChart >
<syncfusion:SfChart.Resources>
<ResourceDictionary>
<DataTemplate x:Key="template">
<StackPanel Orientation="Horizontal">
<CheckBox Margin="2" Tag="{Binding}" IsChecked="True" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Rectangle Width="{Binding IconWidth}" Height="{Binding IconHeight}" Fill="{Binding Interior}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="2"/>
<TextBlock MaxWidth="150" TextWrapping="Wrap" HorizontalAlignment="Center" Margin="5,0,0,0" VerticalAlignment="Center" Text="{Binding Label}" Foreground="{Binding Interior}" FontWeight="Bold"/>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</syncfusion:SfChart.Resources>
………
</syncfusion:SfChart>
C#:
DataTemplate template = new DataTemplate();
template.DataType = typeof(StackPanel);
//set up the stack panel
FrameworkElementFactory stackpanel= new FrameworkElementFactory(typeof(StackPanel));
stackpanel.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);
//set up the checkbox
FrameworkElementFactory checkbox= new FrameworkElementFactory(typeof(CheckBox));
checkbox.SetBinding(CheckBox.TagProperty, new Binding(""));
checkbox.SetValue(CheckBox.IsCheckedProperty, true);
checkbox.SetValue(CheckBox.MarginProperty, new Thickness(2));
checkbox.SetValue(CheckBox.VerticalAlignmentProperty, VerticalAlignment.Center);
stackpanel.AppendChild(checkbox);
//set up the rectangle
FrameworkElementFactory rectangle= new FrameworkElementFactory(typeof(Rectangle));
rectangle.SetValue(Rectangle.MarginProperty, new Thickness(2));
rectangle.SetBinding(Rectangle.HeightProperty, new Binding("IconHeight"));
rectangle.SetBinding(Rectangle.WidthProperty, new Binding("IconWidth"));
rectangle.SetBinding(Rectangle.FillProperty, new Binding("Interior"));
rectangle.SetValue(Rectangle.VerticalAlignmentProperty, VerticalAlignment.Center);
stackpanel.AppendChild(rectangle);
//set up the textblock
FrameworkElementFactory textblock= new FrameworkElementFactory(typeof(TextBlock));
textblock.SetBinding(TextBlock.TextProperty, new Binding("Label"));
textblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
textblock.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
textblock.SetValue(TextBlock.MarginProperty, new Thickness(5, 0, 0, 0));
textblock.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
textblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
textblock.SetValue(TextBlock. MaxWidthProperty, 150.00);
textblock.SetValue(TextBlock.TextWrappingProperty, TextWrapping.Wrap);
stackpanel.AppendChild(textblock);
//set the visual tree of the data template
template.VisualTree = stackpanel;
Step 2: Assign the declared DataTemplate to the ItemTemplate property of ChartLegend as per the following code snippet.
XAML:
<syncfusion:SfChart>
<syncfusion:SfChart.Legend>
<syncfusion:ChartLegend ItemTemplate="{StaticResource template}" />
</syncfusion:SfChart.Legend>
</syncfusion:SfChart>
C#:
SfChart chart = new SfChart(); …….. ChartLegend chartLegend = new ChartLegend(); chart.Legend = chartLegend; //set the ItemTemplate value using our DataTemplate chartLegend.ItemTemplate = template;
Output:
