This walkthrough demonstrates steps necessary to add a simple column chart to a WPF application.

Prerequisites

This walkthrough doesn't cover installation of amCharts for WPF. Read Installation article for the installation instructions.

Adding column chart object to a WPF Window

Note:

This procedure assumes that you have already created or opened a WPF application and a Window in it.

  1. Drag ColumnChart control from your Visual Studio toolbox onto your WPF Designer surface.

  2. Adjust Width and Height properties of the created am:ColumnChart via XAML editor or properties window. Alternatively you can just delete these property settings to allow the chart to occupy all of the available space.

  3. Add a am:ColumnChartGraph to am:ColumnChart.Graphs collection.

    Set Title property to a title of your graph. This will be displayed in legend.

  4. Add a data points to graphs am:ColumnChartGraph.DataItems collection by specifying several am:ColumnDataPoint objects. Set SerieID property to the series identifier (X-axis value) and Value property to graphs value at this x-point.

You have successfully added a simple column chart to your WPF application

Here's a complete code of the window containing the column chart:

CopyXAML
<Window x:Class="AmChartsWPFTutorials.SimpleColumnChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:am="http://schemas.amcharts.com/charts/wpf/2009/xaml"
    Title="SimpleColumnChart" Height="400" Width="640">
    <Grid>
        <am:ColumnChart Name="columnChart1">
            <am:ColumnChart.Graphs>
                <am:ColumnChartGraph Title="Chart #1">
                    <am:ColumnChartGraph.DataItems>
                        <am:ColumnDataPoint SeriesID="1" Value="1" />
                        <am:ColumnDataPoint SeriesID="2" Value="4" />
                        <am:ColumnDataPoint SeriesID="3" Value="6" />
                        <am:ColumnDataPoint SeriesID="4" Value="5" />
                        <am:ColumnDataPoint SeriesID="5" Value="2" />
                        <am:ColumnDataPoint SeriesID="6" Value="4" />
                        <am:ColumnDataPoint SeriesID="7" Value="5" />
                    </am:ColumnChartGraph.DataItems>
                </am:ColumnChartGraph>
            </am:ColumnChart.Graphs>
        </am:ColumnChart>
    </Grid>
</Window>

See Also