Legend
A legend can provide context for what each pie slice represents. Legends are fully stylable to match the look and feel of your application.
Getting Started
The legend will display the title of each pie slice in the pie chart, along with the color of each pie slice as a key in the legend. To display a legend on a pie / donut chart, set PieChart.IsLegendVisible to true
.
<charts:PieChart IsLegendVisible="true"/>
Legend Position
The position of the legend can be controlled using PieChart.LegendHorizontalPosition and PieChart.LegendVerticalPosition. Legend positions have two modifiers, Inside
and Outside
(for example, LeftInside and TopOutside.
Inside
means the legend will be positioned within the pie chart drawing area and may overlap labels and other elements. Outside
means the legend will be positioned outside of the pie chart drawing area and space will be made so that it does not overlap the pie chart or labels.
This is a legend displayed at TopInside
and RightInside
. Note how it overlaps other elements on the pie chart.
<charts:PieChart LegendVerticalPosition="TopInside" LegendHorizontalPosition="RightInside"/>
This is a legend displayed at TopInside
and RightOutside
. Note how room is made to place the legend on the right, outside the chart.
<charts:PieChart LegendVerticalPosition="TopInside" LegendHorizontalPosition="RightOutside"/>
Legend position can also be fine-tuned using PieChart.LegendMargin. LegendMargin is a Thickness
that determines how the legend is placed after PieChart.LegendHorizontalPosition and PieChart.LegendVerticalPosition are applied.
This is a legend displayed at TopInside
and RightInside
, with a LegendMargin
of 0,40,0,0
. Note how the legend is placed 40 pixels lower than it normally would be without the margin.
<charts:PieChart LegendVerticalPosition="TopInside"
LegendHorizontalPosition="RightInside" LegendMargin="0,40,0,0"/>
Styling Legend
The legend can be styled using PieChart.LegendStyle. The style you provide should have a TargetType
of ItemsControl
.
This is an example of providing a custom LegendStyle
.
<charts:PieChart.LegendStyle>
<Style TargetType="ItemsControl">
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#222222" Offset="0.0"/>
<GradientStop Color="#444444" Offset="0.2"/>
<GradientStop Color="#444444" Offset="0.8"/>
<GradientStop Color="#222222" Offset="1.0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="10"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Opacity="0.5"/>
</Setter.Value>
</Setter>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontStyle" Value="Italic"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="White"/>
</Style>
</charts:PieChart.LegendStyle>
Legend Item Customization
Each individual legend item can be retemplated by setting ItemTemplate
in PieChart.LegendStyle. The data source for the template is LegendKey, allowing you to bind to properties from the template such as LegendKey.Label and LegendKey.LegendMarkerStyle.
This is an example of providing a custom LegendStyle
to retemplate the legend items.
<charts:PieChart.LegendStyle>
<Style TargetType="ItemsControl">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Padding="5,0">
<StackPanel Orientation="Horizontal">
<charts:ChartMarker Margin="0,0,5,0" Style="{Binding LegendMarkerStyle}" BorderBrush="#333333" ShapeKind="Star5Points" Width="15" Height="15" />
<TextBlock Text="{Binding Label}" Foreground="#111111" FontFamily="Arial" FontSize="16"/>
</StackPanel>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</charts:PieChart.LegendStyle>