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

Prerequisites

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

Adding line 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 LineChart control from your Visual Studio toolbox onto your WPF Designer surface.

  2. Adjust Width and Height properties of the created am:LineChart 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:LineChartGraph to am:LineChart.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:LineChartGraph.DataItems collection by specifying several am:LineDataPoint 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 line chart to your WPF application

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

CopyXAML
<Window x:Class="AmChartsWPFTutorials.SimpleLineChart"
    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="SimpleLineChart" Height="400" Width="640">
    <Grid>
        <am:LineChart Name="lineChart1">
            <am:LineChart.Graphs>
                <am:LineChartGraph Title="Chart #1">
                    <am:LineChartGraph.DataItems>
                        <am:LineDataPoint SeriesID="1" Value="1" />
                        <am:LineDataPoint SeriesID="2" Value="4" />
                        <am:LineDataPoint SeriesID="3" Value="6" />
                        <am:LineDataPoint SeriesID="4" Value="5" />
                        <am:LineDataPoint SeriesID="5" Value="2" />
                        <am:LineDataPoint SeriesID="6" Value="4" />
                        <am:LineDataPoint SeriesID="7" Value="5" />
                    </am:LineChartGraph.DataItems>
                </am:LineChartGraph>
            </am:LineChart.Graphs>
        </am:LineChart>
    </Grid>
</Window>

And when your run the application your window should look like this:

See Also