WPF Charting Documentation - SciChart WPF Charts SDK v5.x
The Pie Chart Type

New to SciChart v4.2!

In SciChart v4.2 and above, The Pie Chart type is represented by the SciChartPieSurface class.

The SciChart Pie Chart type

The SciChart Pie Chart type

The Pie Chart represents data in a form of circle divided into triangular wedges called segments. A PieSegment represents a percentage that corresponds to a particular value. This value appears drawn on every segment and can be set either in Xaml or code. A PieSegment can be selected by clicking either on it or on the corresponding item in the Legend. This action provides a visual feedback on the chart and the Legend.

The Elements on a Pie Chart like Title, Legend, Labels

The Elements on a Pie Chart like Title, Legend, Labels

Create a Pie Chart

To create a Pie Chart, you have to provide a data source collection and assign it to the SciChartPieSurfaceBase.ItemsSource property. The data source is a collection of objects which implement the IPieSegmentViewModel interface. When creating the data source, add as many objects for as many segments you want to appear.

Creating a Pie Chart with MVVM

To create a Pie Chart in MVVM, first, create a Viewmodel for Pie Segments. Each must implement IPieSegmentViewModel, which has the following properties:

The IPieSegmentViewModel interface defines the following properties:

PieSegmentViewModel example
Copy Code
public class PieSegmentViewModel : IPieSegmentViewModel
{
    public double Value { get; set; }
    public double Percentage { get; set; }
    public string Text { get; set; }
    public Brush Fill { get; set; }
    public bool IsSelected { get; set; }
}

Next, declare your pie segments as follows:

Pie Chart MVVM Example - Viewmodel
Copy Code
public class UsingPieChartExampleViewModel : BaseViewModel
{
    public UsingPieChartExampleViewModel()
    {
        SegmentsDataCollection = new ObservableCollection<IPieSegmentViewModel>
        {
            new PieSegmentViewModel {Value = 60, Text = "Fruit" },
            new PieSegmentViewModel {Value = 46, Text = "Protein"},
            new PieSegmentViewModel {Value = 36, Text = "Vegetables"},
            new PieSegmentViewModel {Value = 30, Text = "Diary" },
            new PieSegmentViewModel {Value = 18, Text = "Grains" },
            new PieSegmentViewModel {Value = 10, Text = "Other" },
        };
    }
    public ObservableCollection<IPieSegmentViewModel> SegmentsDataCollection { get; set; }
}
public class PieSegmentViewModel : IPieSegmentViewModel
{
    public double Value { get; set; }
    public double Percentage { get; set; }
    public string Text { get; set; }
    public Brush Fill { get; set; }
}

Finally, bind to the segments via the SciChartPieSurfaceBase.ItemsSource property.

Pie Chart  MVVM Example - XAML
Copy Code
<s:SciChartPieSurface  ChartTitle="Recommended Diet"
                       ItemsSource="{Binding SegmentsDataCollection}">
    <s:SciChartPieSurface.ItemTemplate>
        <DataTemplate DataType="gauge:PieSegmentViewModel">
            <s:PieSegment Fill="{Binding Fill}" SegmentValue="{Binding Path=Value}" Text="{Binding Path=Text}" />
        </DataTemplate>
    </s:SciChartPieSurface.ItemTemplate>
    <s:SciChartPieSurface.BrushesCollection>
        <SolidColorBrush Color="#FF8E01" />
        <SolidColorBrush Color="#339933" />
        <SolidColorBrush Color="#00AAFF" />
        <SolidColorBrush Color="#818183" />
        <SolidColorBrush Color="Firebrick" />
        <SolidColorBrush Color="DarkSalmon" />
    </s:SciChartPieSurface.BrushesCollection>
</s:SciChartPieSurface>

Creating a Pie Chart without MVVM

Alternatively, you can set the ItemSource directly in XAML or in Code behind, without a ViewModel. In this case, use the following code.

Pie Chart - Simple XAML Example
Copy Code
<s:SciChartPieSurface.ItemsSource>
    <s:PieSegmentItem Fill="AliceBlue" Name="Text" Value="10" IsSelected="True"/>
    <s:PieSegmentItem Fill="Aqua" Name="Text1" Value="20"/>
    <s:PieSegmentItem Fill="Black" Name="Text2" Value="30"/>
    <s:PieSegmentItem Fill="Blue" Name="Text3" Value="30"/>
    <s:PieSegmentItem Fill="Coral" Name="Text4" Value="40"/>
    <s:PieSegmentItem Fill="Crimson" Name="Text5" Value="50"/>
</s:SciChartPieSurface.ItemsSource>

Configuring Pie Chart Segments

Multi-Select

The multi-select option is available via the SciChartPieSurfaceBase.AllowMultiSelect property. The selection of a Pie segment can be handled via the SciChartPieSurface.SelectionChanged event or the IsSelected property on IPieSegmentViewModel.

Styling Labels in Pie Segments

Every Pie segment can be configured to show the Outer Label and Inner Label. Their values can be provided via the corresponding properties of IPieSegmentViewModel. The Labels can be templated by using SciChartPieSurfaceBase.InsideLabelTemplate property.

Templating the Labels in Pie Segments
Copy Code
<s:SciChartPieSurface.InsideLabelTemplate>
   <DataTemplate DataType="s:IPieSegmentViewModel">
       <TextBlock FontSize="14"
                  FontWeight="Bold"
                  Foreground="#FF1C1C1F"
                  Text="{Binding Percentage, StringFormat={}{0:#.##}%}" />
   </DataTemplate>
</s:SciChartPieSurface.InsideLabelTemplate>

Styling Labels outside of Pie Segments

The outer label can also be styled, using the SciChartPieSurfaceBase.OutsideLabelTemplate property.

The line which connects an outside label to the pie segment may be styled with the SciChartPieSurfaceBase.InfoLineStyle property.

Changing Pie Segment Colors

Colors of Pie segments can be set manually via the Color property in IPieSegmentViewModel or picked automatically from the SciChartPieSurfaceBase.BrushesCollection. This collection can be overridden with custom colors. If you don't provide colors they will be randomly created.

Styling Pie Segment Colors
Copy Code
<s:SciChartPieSurface.BrushesCollection>
    <SolidColorBrush Color="#FF8E01" />
    <SolidColorBrush Color="#339933" />
    <SolidColorBrush Color="#00AAFF" />
    <SolidColorBrush Color="#818183" />
    <SolidColorBrush Color="Firebrick" />
    <SolidColorBrush Color="DarkSalmon" />
</s:SciChartPieSurface.BrushesCollection>

Configure the Legend

To show the Legend, set the SciChartPieSurfaceBase.ShowLegend property to True. Legend items can be re-styled via the LegendListStyle and LegendItemTemplate properties:

Pie Chart Legend Styling Example
Copy Code
 <s:SciChartPieSurface.LegendListStyle>
     <Style TargetType="ListBox">
        <Setter Property="Foreground" Value="#FFDFE0E6" />
        <Setter Property="Background" Value="#FFDFE0E6" />
     </Style>
 </s:SciChartPieSurface.LegendListStyle>

<s:SciChartPieSurface.LegendItemTemplate>
    <DataTemplate DataType="visuals:IPieSegmentViewModel">
            <Grid HorizontalAlignment="Stretch" Margin="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Column="0"
                           Width="20"
                           Height="20"
                           Fill="{Binding Fill}"/>
                <TextBlock Grid.Column="1"
                           FontSize="14"
                           TextWrapping="Wrap"
                           HorizontalAlignment="Center" 
                           Margin="3"
                           Text="{Binding Name}"/>
                <TextBlock Grid.Column="2"
                           Margin="3"
                           FontSize="14"
                           VerticalAlignment="Center"
                           Text="{Binding Value}"/>
            </Grid>
    </DataTemplate>
<s:SciChartPieSurface.LegendItemTemplate>

Configure Cursor Tooltips

Slice tooltip by using SciChartPieSurfaceBase.ShowTooltip property. You can change style and template for tooltip by using properties SciChartPieSurfaceBase.SegmentTooltipContainerStyle and SciChartPieSurfaceBase.SegmentTooltipTemplate:

Pie Chart Tooltip Template

Pie Chart Tooltip Template

Styling the Pie Chart Tooltips
Copy Code
<s:SciChartPieSurface.SegmentTooltipTemplate>
   <DataTemplate DataType="visuals:IPieSegmentViewModel">
            <Grid HorizontalAlignment="Stretch" Margin="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <Rectangle Width="20"
                           HorizontalAlignment="Left" 
                           Height="20"
                           Fill="{Binding Fill}"/>
                <TextBlock Grid.Column="1"
                           Grid.Row="0"
                           FontSize="14"
                           HorizontalAlignment="Left" 
                           Margin="3"
                           Text="{Binding Percentage, StringFormat={}{0} %}"/>
                <TextBlock Grid.Column="0"
                           Grid.Row="1"
                           Margin="3"
                           FontSize="14"
                           VerticalAlignment="Center"
                           Text="Name: "/>
                <TextBlock Grid.Column="1"
                           Grid.Row="1"
                           Margin="3"
                           FontSize="14"
                           VerticalAlignment="Center"
                           Text="{Binding Name}"/>
            </Grid>
    </DataTemplate>
</s:SciChartPieSurface.SegmentTooltipTemplate>

 

 

 


SCICHART ® is a Registered Trademark in the UK, US and EU. Copyright SciChart Ltd 2011-2018.

Email us to give feedback!