We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to wrap the text in the WPF Chart legend?

Platform: WPF |
Control: SfChart

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:

Legend text wrap in the Chart.

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile