How to create custom legend items in WPF Chart?
This article explains how to define custom legend items using ViewModel data.
Custom legend items can be created by adding the desired number of LegendItem objects to the Items property of the ChartLegend. Each item can be configured with properties such as Item, Series, IconHeight, IconWidth, IconVisibility, Interior, and ItemTemplate, as shown in the code snippet below.
[XAML]
<DataTemplate x:Key="itemTemplate">
<StackPanel Margin="10,0,10,0" Orientation="Horizontal">
<CheckBox Margin="2" Tag="{Binding}"
IsChecked="True"
Checked="CheckBox_Checked"
Unchecked="CheckBox_Unchecked"/>
<Rectangle Width="{Binding IconWidth}"
Height="{Binding IconHeight}"
Fill="{Binding Interior}" Margin="2"/>
<TextBlock HorizontalAlignment="Center"
Margin="5,0,0,0"
VerticalAlignment="Center"
Text="{Binding Item.XValue}">
</TextBlock>
</StackPanel>
</DataTemplate>
[C#]
ChartLegend legend = new ChartLegend();
foreach (var series in chart.Series)
{
var data = series.ItemsSource as ObservableCollection<Model>;
for (int i = 0; i < data.Count; i++)
{
legend.Items.Add(new LegendItem()
{
Item = data[i].XValue.ToString(),
Series = series,
IconHeight = 10,
IconWidth = 10,
IconVisibility = Visibility.Visible,
Interior = series1.ColorModel.GetBrush(i),
CheckBoxVisibility = Visibility.Visible
});
}
}
legend.ItemTemplate = grid.Resources["itemTemplate"] as DataTemplate;
chart.Legend = legend;
private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
CheckBox box = sender as CheckBox;
LegendItem item = box.Tag as LegendItem;
UpdateLegend(true, item.Item as Model);
}
private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
CheckBox box = sender as CheckBox;
LegendItem item = box.Tag as LegendItem;
UpdateLegend(false, item.Item as Model);
}
private void UpdateLegend(bool isChecked, Model item)
{
foreach (PieSeriesExt series in chart.Series)
{
if (isChecked)
toggleIndexes.Remove(viewModel.Data.IndexOf(item));
else
toggleIndexes.Add(viewModel.Data.IndexOf(item));
series.GetType().GetField("ToggledLegendIndex", BindingFlags.NonPublic |
BindingFlags.Instance).SetValue(series, toggleIndexes);
}
UpdateArea();
}
private void UpdateArea()
{
MethodInfo info = chart.GetType().GetMethod("UpdateArea",
BindingFlags.NonPublic | BindingFlags.Instance,
null,
new Type[] { typeof(bool) },
null);
info?.Invoke(chart, new object[] { true });
}
Output
The following demo image illustrates how to create custom legend items in WPF Chart.
For more details, please refer to the project on GitHub.
Conclusion
I hope you enjoyed learning how to create custom legend items in WPF Chart.
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!
You have item.Item as Model. What is Model????
Thanks