How to: Bind a Chart to an Observable Collection

  • 2 min to read

This example illustrates how to create a Pie chart bound to an observable collection.

Click the button to add points to the existing collection, and see how the chart changes automatically.

<Window x:Class="PieBindingToObservableCollection.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
        xmlns:local="clr-namespace:PieBindingToObservableCollection"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{dxmvvm:ViewModelSource Type=local:ViewModel}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Command="{Binding AddPointCommand}" Content="Add Point" />
        <dxc:ChartControl Grid.Row="1">
            <dxc:ChartControl.Diagram>
                <dxc:SimpleDiagram2D>
                    <dxc:SimpleDiagram2D.Series>
                        <dxc:PieSeries2D ArgumentDataMember="X" ValueDataMember="Y" DataSource="{Binding Path=PointsCollection}" />
                    </dxc:SimpleDiagram2D.Series>
                </dxc:SimpleDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>