Multiple legends for single chart area

[Marcus johansson]

Hello,

Is it possible to have different groups of legends (let's say two rows) for different series in a chart? That is, can I have one row of legends for series A, B, C ... and another row of legends for series X, Y, Z ...? Looking at your example (Multiple Legends, https://help.syncfusion.com/wpf/charts/legend), it only seems to be possible if you're using multiple chart areas.

Best regards,

Marcus

[Yuvaraj Palanisamy]

Hi Marcus Johansson, 

 

Greetings from Syncfusion. 

 

Yes, you can achieve your requirement “Wrap the legend items group” with the help of ItemsPanelTemplate for ChartLegend and SfChart RowDefinitions.  

 

# Solution 1 [Using ItemsPanelTemplate] 

 

We can achieve with the help of setting ItemsPanel property of ChartLegend to various panel in WPf like Grid, Stack panel,… Please refer the below link for WPF built panels. 

 

https://www.wpf-tutorial.com/panels/introduction-to-wpf-panels/  

 

Please find the code example below for your reference. 

CodeSnippet: 

<syncfusion:SfChart.Resources> 

    <ItemsPanelTemplate x:Key="itemPanelTemplate"> 

        <WrapPanel Width="150"/> 

    </ItemsPanelTemplate> 

</syncfusion:SfChart.Resources> 

 

<syncfusion:SfChart.Legend> 

    <syncfusion:ChartLegendCollection> 

        <syncfusion:ChartLegend ItemsPanel="{StaticResource itemPanelTemplate}"/> 

    </syncfusion:ChartLegendCollection> 

</syncfusion:SfChart.Legend> 

 

 

Also, we have prepared the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162839/ze/Sample_ItemsPanel-1566416600  

 

Output: 

 

 

## Solution 2 [Using SfChart RowDefinitions] 

 

Also, we can achieve with SfChart RowDefinitions support. Also, we have prepared the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162839/ze/Sample_RowDefinition1996247721  

 

Output: 

 

 

Regards, 

Yuvaraj. 

[Marcus johansson]

Hi and thanks for the reply,

This didn't quite solve our issue. What we're after is simply a way to have two or more rows of legend items, and being able to set exactly which series (legend item) goes into which row. That is, we may want to put (the legend items of) series A, B and C in row 1, series M, N, O, P and Q in row 2 and series X and Y in row 3. We just want the user to have a better overview of the different types of series in the chart.

Best regards,

Marcus

[Yuvaraj Palanisamy]

Hi Marcus, 

 

We have achieved your requirement “Legend item with specify row” with the help of inheriting the Grid and overriding the OnVisualChildrenAdded() and positioning the legend item. Please find the code example below. 

 

CodeSnippet: 

XAML: 

<syncfusion:SfChart.Resources> 

    <ItemsPanelTemplate x:Key="itemPanelTemplate"> 

        <local:CustomGrid> 

            <local:CustomGrid.RowDefinitions> 

                <RowDefinition/> 

                <RowDefinition/> 

                <RowDefinition/> 

            </local:CustomGrid.RowDefinitions> 

            <local:CustomGrid.ColumnDefinitions> 

                <ColumnDefinition/> 

                <ColumnDefinition/> 

            </local:CustomGrid.ColumnDefinitions> 

        </local:CustomGrid> 

    </ItemsPanelTemplate> 

</syncfusion:SfChart.Resources> 

 

 

C#: 

public class CustomGrid : Grid 

{ 

    protected override void OnVisualChildrenChanged(DependencyObject visualAdded, DependencyObject visualRemoved) 

    { 

        base.OnVisualChildrenChanged(visualAdded, visualRemoved); 

        if (visualAdded != null) 

        { 

            var content = visualAdded as ContentPresenter; 

            var label = (content.DataContext as LegendItem).Label; 

            if (label == "A-Column") 

            { 

                Grid.SetRow(content, 0); 

            } 

            else if (label == "M-Scatter") 

            { 

                Grid.SetRow(content, 1); 

            } 

            else if (label == "N-TopLine") 

            { 

                Grid.SetRow(content, 1); 

                Grid.SetColumn(content, 1); 

            } 

            else 

            { 

                Grid.SetRow(content, 2); 

                Grid.SetColumn(content, 0); 

            } 

        } 

    } 

} 

 

 

Also, we have prepared the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162839/ze/Legend-GridPanel85469512  

  

Output: 

 

 

Regards, 

Yuvaraj.