LineChart - Usage tutorial
Last modified: April 10, 2013
- Placing on the form
- Working with axes
- Adding Regions and Limit lines
- Adding Data
Placing on the form
To add LineChart control to the form simply double-click it in the toolbox. This is how it should appear:
You can adjust its position and size by manipulating the Size and Location properties. You can also use the Dock property to dock the control to any of the edges of the form.
Working with axes
Next step is to select the appropriate axes. First we select the x-axis (horizontal). There are three types of x-axes: LinearXAxisFoat, LinearXAxisLong and LinearXAxisDateTime. The type of axis depends on the type of data you have. To insert an axis simply select one from the list.
Next step is to add y-axis (vertical). Unlike the x-axis, line chart can have more y-axis. Y-axes can be added using YAxis Collection Editor (see below). There are two types of y-axis: LinearYAxisFloat and LogarithmicYAxisFloat (logarithmic scale based 10).
There are many properties that you can set to adjust axis to your needs.
Adding Regions and Limit lines
Regions and LimitLines can be added using Region Collection Editor and LimitLine Collection Editor on each axis.
Region is a custom block of space on axis with its own name, font, background and foreground color which can represent special interval on the axis.
LimitLine is a custom line with its own color and width which can represent special value on the axis.
After adding one region and one limit line to y-axis the line chart should see like this:
Last important part is to add data. The type of data must be compatible with the type of axes. Line chart can have multiple series of data. Each data series can be designed in Visual Studio Designer, but the data itself can be added in runtime.
DataSeries can be added using DataSeries Collection Editor. The property which holds data series is called ChartData.
The most important thing about data series is that it has to be binded to some y-axis – if it isn’t, the data will not be drawn. To bind y-axis click on the property YAxis and select some of the chart’s y-axis.
Another interesting feature is interpolation mode. In Straight interpolation mode points are connected directly, in Angled mode they are connected with two perpendicular lines.
Next code shows a way to add data to data series added to LineChart (property ChartData).
DataSeries data = lineChart1.ChartData; // ... data.DataItems.Add(new DataItemFloatFloat(x, y)); // ...