Lesson 1 - Creating a Cartesian Chart
- 4 minutes to read
This lesson demonstrates how to create a simple Cartesian chart with three Stacked Bar series, populate them with data and adjust common settings.
To create a simple charting application, do the following.
- Step 1. Create a New Project and Add a Chart
- Step 2. Provide Chart Data
- Step 3. Customize a Chart
- Result
Step 1. Create a New Project and Add a Chart Control
- Run MS Visual Studio 2017.
Create a new Universal | Blank App (Universal Windows) project.
Switch to the MainPage.xaml design view and add the CartesianChart control to the main page. To do this, drag and drop the CartesianChart item from the DX.19.2: Visualization toolbox tab.
Note
After that, the following SDK extensions will be added to the References list of your project: DevExpress.Core and DevExpress.Visualization.
Right-click the CartesianChart object and choose the Layout | Reset All option in the context menu. This will stretch the chart to fill the whole window.
After this, your XAML may look like the following. If it doesn’t, you can overwrite your code with:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Charts="using:DevExpress.UI.Xaml.Charts"
x:Class="CartesianChartLesson.MainPage">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Charts:CartesianChart/>
</Grid>
</Page>
Let’s proceed to the next step, and see how to add series to the chart and provide series points with data.
Step 2. Provide Chart Data
In this step, the chart will be manually populated with data.
For the CartesianChart control, locate the ChartBase.Series property and click the ellipsis button to invoke the Series Collection Editor: Series dialog. In this dialog, add a Series object to the collection.
Set the Series.DisplayName property to 1998. The property value will be used to identify the series in the chart’s legend.
After that, specify a series view for the series. To do this, assign a SideBySideBarSeriesView object to the Series.View property.
To manually provide data for a series, it’s necessary to assign a DataPointCollection object to the Series.Data property.
Note
It is possible to modify the DataPoint.ArgumentScaleType and DataPoint.ValueScaleType properties if you wish to disable automatic data type detection and explicitly specify how a chart should treat data in data points.
Add the following DataPoint objects to the DataPointCollection.Points collection.
Argument Value Illinois 423.721 Indiana 178.719 Michigan 308.845 Ohio 348.555 Wisconsin 160.274 
Repeat this step to add two series with names 2001 and 2004. Populate this series with data point values and arguments represented in the table below.
Argument 2001 Series Value 2004 Series Value Illinois 476.851 528.904 Indiana 195.769 227.271 Michigan 335.793 372.576 Ohio 374.771 418.258 Wisconsin 182.373 211.727
After completing this, the XAML should look like following.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Charts="using:DevExpress.UI.Xaml.Charts"
x:Class="CartesianChartLesson.MainPage">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Charts:CartesianChart>
<Charts:CartesianChart.Series>
<Charts:Series
DisplayName="1998">
<Charts:Series.View>
<Charts:SideBySideBarSeriesView/>
</Charts:Series.View>
<Charts:DataPointCollection>
<Charts:DataPoint
Argument="Illinois"
Value="423.721"/>
<Charts:DataPoint
Argument="Indiana"
Value="178.719"/>
<Charts:DataPoint
Argument="Michigan"
Value="308.845"/>
<Charts:DataPoint
Argument="Ohio"
Value="348.555"/>
<Charts:DataPoint
Argument="Wisconsin"
Value="160.274"/>
</Charts:DataPointCollection>
</Charts:Series>
<Charts:Series
DisplayName="2001">
<Charts:Series.View>
<Charts:SideBySideBarSeriesView/>
</Charts:Series.View>
<Charts:DataPointCollection>
<Charts:DataPoint
Argument="Illinois"
Value="476.851"/>
<Charts:DataPoint
Argument="Indiana"
Value="195.769"/>
<Charts:DataPoint
Argument="Michigan"
Value="335.793"/>
<Charts:DataPoint
Argument="Ohio"
Value="374.771"/>
<Charts:DataPoint
Argument="Wisconsin"
Value="182.373"/>
</Charts:DataPointCollection>
</Charts:Series>
<Charts:Series
DisplayName="2004">
<Charts:Series.View>
<Charts:SideBySideBarSeriesView/>
</Charts:Series.View>
<Charts:DataPointCollection>
<Charts:DataPoint
Argument="Illinois"
Value="528.904"/>
<Charts:DataPoint
Argument="Indiana"
Value="227.271"/>
<Charts:DataPoint
Argument="Michigan"
Value="372.576"/>
<Charts:DataPoint
Argument="Ohio"
Value="418.258"/>
<Charts:DataPoint
Argument="Wisconsin"
Value="211.727"/>
</Charts:DataPointCollection>
</Charts:Series>
</Charts:CartesianChart.Series>
</Charts:CartesianChart>
</Grid>
</Page>
Step 3. Customize the Chart
In this step, customize the chart’s legend and the Y-axis to improve chart readabilty.
By default, the chart doesn’t show a legend. If you wish to display it, simply assign the Legend object to the ChartBase.Legend property. To change the legend’s position, modify its Legend.HorizontalPosition and Legend.VerticalPosition property values.
To add the Y-axis title, assign a AxisY object to the CartesianChart.AxisY property, then assign the AxisTitle object to the AxisBase.Title property. After that, it is possible to customize the title’s parameters, e.g., set the AxisTitle.Content property to Millions of USD.
To add margins to the chart, set its Windows.UI.Xaml.FrameworkElement.Margin property to 16.
Result
Now our chart is ready. Your code and XAML should look as follows.
<Page
x:Class="CartesianChartLesson.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Charts="using:DevExpress.UI.Xaml.Charts">
<Grid
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Charts:CartesianChart Margin="16">
<Charts:CartesianChart.Palette>
<Charts:OfficePalette/>
</Charts:CartesianChart.Palette>
<Charts:CartesianChart.AxisY>
<Charts:AxisY>
<Charts:AxisY.Title>
<Charts:AxisTitle
Content="Millions of USD" />
</Charts:AxisY.Title>
</Charts:AxisY>
</Charts:CartesianChart.AxisY>
<Charts:CartesianChart.Legend>
<Charts:Legend
VerticalPosition="TopOutside"
HorizontalPosition="Right"/>
</Charts:CartesianChart.Legend>
<Charts:CartesianChart.Series>
<Charts:Series
DisplayName="1998">
<Charts:Series.View>
<Charts:SideBySideBarSeriesView/>
</Charts:Series.View>
<Charts:DataPointCollection>
<Charts:DataPoint
Argument="Illinois"
Value="423.721"/>
<Charts:DataPoint
Argument="Indiana"
Value="178.719"/>
<Charts:DataPoint
Argument="Michigan"
Value="308.845"/>
<Charts:DataPoint
Argument="Ohio"
Value="348.555"/>
<Charts:DataPoint
Argument="Wisconsin"
Value="160.274"/>
</Charts:DataPointCollection>
</Charts:Series>
<Charts:Series
DisplayName="2001">
<Charts:Series.View>
<Charts:SideBySideBarSeriesView/>
</Charts:Series.View>
<Charts:DataPointCollection>
<Charts:DataPoint
Argument="Illinois"
Value="476.851"/>
<Charts:DataPoint
Argument="Indiana"
Value="195.769"/>
<Charts:DataPoint
Argument="Michigan"
Value="335.793"/>
<Charts:DataPoint
Argument="Ohio"
Value="374.771"/>
<Charts:DataPoint
Argument="Wisconsin"
Value="182.373"/>
</Charts:DataPointCollection>
</Charts:Series>
<Charts:Series
DisplayName="2004">
<Charts:Series.View>
<Charts:SideBySideBarSeriesView/>
</Charts:Series.View>
<Charts:DataPointCollection>
<Charts:DataPoint
Argument="Illinois"
Value="528.904"/>
<Charts:DataPoint
Argument="Indiana"
Value="227.271"/>
<Charts:DataPoint
Argument="Michigan"
Value="372.576"/>
<Charts:DataPoint
Argument="Ohio"
Value="418.258"/>
<Charts:DataPoint
Argument="Wisconsin"
Value="211.727"/>
</Charts:DataPointCollection>
</Charts:Series>
</Charts:CartesianChart.Series>
</Charts:CartesianChart>
</Grid>
</Page>
Run the project. The following image illustrates the resulting chart at runtime.
