How to wrap the text in the WPF Chart legend?
This knowledge base article explains how to enable text wrapping for each item in a WPF chart legend using Syncfusion® WPF controls. Follow the steps below to achieve this by utilizing the ItemTemplate property of the ChartLegend class.
Step 1: Create a DataTemplate for the Legend Item
To create a DataTemplate that represents the legend item, use a combination of StackPanel, Rectangle, and TextBlock. Ensure that you set the TextWrapping property to Wrap for the TextBlock.
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 DataTemplate to the ItemTemplate Property of ChartLegend
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:
Conclusion
I hope you enjoyed learning how to wrap the text in the WPF Chart legend.
You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
