The Chart component allows you to display charts with multiple axes and combine several charts.

The Chart component allows you to swap the argument (X) and value (Y) axes and display the X axis vertically and the Y axis horizontally. To do this, set the chart's Rotated property to true.

This demo shows two charts bound to the same data source. The chart on the left has the default axes, and the chart on the right has swapped axes.

You can use the following properties to change the axis position in the Chart component:

• CustomPosition: specifies the position of an axis on another axis.
• Offset: specifies the shift of an axis.
• Alignment: specifies the pane edge next to which to place an axis.

In this demo, you can change the CustomPosition and Offset property values for argument and value axes.

The Chart component automatically detects the first series' data type and uses it to render X (argument) and Y (value) axes. If the data range or format is series specific, each series can use its own Y axis. The number of Chart's Y axes is not limited.

To change the type of an axis, use its Type property. The following axis types are available:

• Auto (Default) — For integer and float data types, displays numeric arguments/values divided by ticks (the Continuous type). For other data types, displays discrete arguments/values that correspond to chart points (the Discrete type).
• Continuous — Displays numeric arguments/values divided by ticks.
• Discrete — Displays discrete arguments/values that correspond to chart points.
• Logarithmic — Displays numeric arguments/values that grow exponentially. Each axis argument/value equals to the LogarithmBase value raised to some power. For example, if LogarithmBase is set to 10, the following arguments/values are displayed: 10^-2, 10^-1, 10⁰, 10¹, 10², etc. This type is useful when you need to visualize a dataset of rapidly-growing values.

In this demo, two Chart components display argument axes of the Discrete type, and value axes of Continuous and Logarithmic types, respectively. The LogarithmBase property for the second chart is set to 2.

A scale break allows you to cut a part of the axis to improve the readability of a chart with high amplitude values or outliers.

Use the AutoBreaksEnabled property to calculate scale breaks automatically. The number of calculated breaks depends on the source data. The MaxAutoBreakCount property allows you to limit the maximum number of auto-created scale breaks if the AutoBreaksEnabled is set to true.

Along with auto breaks, you can define the breaks manually. To do this, use the DxChartScaleBreak component. To limit a scale break, specify the StartValue and EndValue properties.

In this demo, you can choose the maximum number of auto-created breaks or disable them.

Constant lines are vertical and horizontal lines that pass through a chart and indicate values on corresponding axis.

In this demo, horizontal constant lines indicate maximum and minimum levels of the Global Land-Ocean Temperature Index between the years of 1880 and 2020. A horizontal constant line is used to mark the zero level on the y-axis.

To add a constant line to a chart, follow the steps below:

1. Add the DxChartConstantLine markup to the DxChartArgumentAxis or DxChartValueAxis component.
2. Specify the constant line's value.
3. Add a text label.

You can also define the following parameters to customize constant line appearance:

• Color
• DashStyle
• DisplayBehindSeries
• Width
• ExtendAxis

To customize font settings of a constant line label, use the DxChartFont component.

Data for this demo is obtained from the following data source: Global Temperature | Vital Signs – Climate Change.