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

Prerequisites

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

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

  2. Adjust Width and Height properties of the created am:XyChart 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:XyChartGraph to am:XyChart.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:XyChartGraph.DataItems collection by specifying several am:XyDataPoint objects. Set X and Y properties to the desired coordinates of the data point and (optionally) Value property to a 3rd dimension value at these coordinates (affects bullet/bubble size).

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

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

CopyXAML
<Window x:Class="AmChartsWPFTutorials.SimpleXyChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SimpleXyChart" Height="400" Width="640" xmlns:am="http://schemas.amcharts.com/charts/wpf/2009/xaml">
    <Grid>
        <am:XyChart Name="xyChart1">
            <am:XyChartGraph Title="Graph #1">
                <am:XyDataPoint X="10" Y="20" />
                <am:XyDataPoint X="20" Y="40" />
                <am:XyDataPoint X="30" Y="10" />
                <am:XyDataPoint X="40" Y="50" />
            </am:XyChartGraph>
        </am:XyChart>
    </Grid>
</Window>

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

See Also