Multiple Axes
You can have the chart render more than one axis for a given dimension. This lets you associate series with different axes, and position different axes to the left, right, top or bottom of the chart. This is often useful when you have data for some series that varies greatly in magnitude from other data, or is measured in a different unit. You can also associate series with different categories on the x-axis without having them side-by-side.
The Examples section offer several common use-cases.
This article contains the following sections:
When using multiple axes, you would often set the color of the axis to match the
Colorof the series that uses it.
Define Multiple Axes
The way multiple axes are declared depends on the chart series type:
Categorical Charts
- Define the extra axis in the corresponding
ChartCategoryAxesorChartValueAxestags. - Set its
Nameproperty as desired. By default, a series uses the first axis. - Provide the
Namevalue to the series you want to use it through itsAxisandCategoryAxisfor theYandXaxis respectively.
Numerical Charts
- Define the extra axis in the corresponding
ChartXAxesorChartYAxestags. - Set its
Nameproperty as desired. By default, a series uses the first axis. - Provide the
Namevalue to the series you want to use it through itsyAxisandxAxisproperties.
Choose Axis Position
To define the position of the extra axes, you need to:
-
Use the
AxisCrossingValueproperty of the first axis from the other dimension. -
Set it to an array that indicates at which points it will be crossed by the multiple axes:
- for categorical axes, the numbers indicate the index of the category at which the axes will cross
- for numerical axes, the numbers indicate the value at which the axes will cross
The items in the array correspond to the order of the axes declaration.
You can set a very large or a very small value to make a certain axis appear at the end of the chart. You can find an example in the Move X-Axis Labels to the Bottom section.
Examples
In this section you can find code examples, explanations on the behavior and screenshots of the expected behavior so you can understand the behavior of the chart and use it to your advantage.
- Categorical Chart - Value Axes Examples
- Category Axes
- Numerical Chart Examples
- Move X-Axis Labels to the Bottom
- Move Value Axis to the Right
Categorical Chart - Value Axes Examples
In the following example, you can see how to define multiple y-axes, associate a series with an axis, and change the position of an axis.
Multiple Y-axes and defining their position according a category axis
Category Axes
You can use multiple category axes to associate each series with its own points on the axis instead of having them add up on the same axis.
Multiple category axes on a line chart
Behavior with Bar and Column Charts
It is important to keep in mind the behavior of the series with multiple category axes:
- the series items will not be rendered side by side, and may overlap (mostly applicable to bar and column types of series).
- series items touch the category axis for some chart types, like a column or bar chart, and having too large or too small crossing values may lead to unexpected appearance.
Multiple category axes on a column chart with proper crossing values and series values
Examples of potentially unwanted behaviors of column and bar types of charts with multiple axes, and the code that produces those issues.
Potentially unwanted behavior 1
<TelerikChart>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@chartData" CategoryAxis="firstAxis" Color="red"
Field="@nameof(MyDataModel.Product1)" CategoryField="@nameof(MyDataModel.FirstSeriesCategories)">
</ChartSeries>
<ChartSeries Type="ChartSeriesType.Column" Name="Product 2" Data="@chartData" CategoryAxis="secondAxis" Color="blue"
Field="@nameof(MyDataModel.Product2)" CategoryField="@nameof(MyDataModel.SecondSeriesCategories)">
</ChartSeries>
</ChartSeriesItems>
<ChartCategoryAxes>
<ChartCategoryAxis Name="firstAxis" Color="red"></ChartCategoryAxis>
<ChartCategoryAxis Name="secondAxis" Color="blue"></ChartCategoryAxis>
</ChartCategoryAxes>
<ChartValueAxes>
<ChartValueAxis AxisCrossingValue="@crossingPoints"></ChartValueAxis>
</ChartValueAxes>
</TelerikChart>
@code {
public class MyDataModel
{
public string FirstSeriesCategories { get; set; }
public string SecondSeriesCategories { get; set; }
public int Product1 { get; set; }
public int Product2 { get; set; }
}
public List<MyDataModel> chartData = new List<MyDataModel>()
{
new MyDataModel() { FirstSeriesCategories = "a", SecondSeriesCategories = "e", Product1 = 1, Product2 = 2 },
new MyDataModel() { FirstSeriesCategories = "match", SecondSeriesCategories = "match", Product1 = 2, Product2 = 3 },
new MyDataModel() { FirstSeriesCategories = "c", SecondSeriesCategories = "g", Product1 = 3, Product2 = 4 },
new MyDataModel() { FirstSeriesCategories = "d", SecondSeriesCategories = "h", Product1 = 4, Product2 = 5 },
};
public object[] crossingPoints = new object[] { -9999999, 9999999 };
}Numerical Chart Examples
When using numerical charts, you define the extra axes in the ChartXAxes and ChartYAxes tags.
Multiple axes in a numerical chart
Move X-Axis Labels to the Bottom
This example shows how to move the x-axis labels to the bottom of the chart. This can be useful when you have negative values and you don't want the x-axis labels to overlap the series themselves.
The general approach is to set an axis crossing point that has a very large value - in this example - int.MinValue.
X-axis Labels at the bottom of the chart with negative values
Move Value Axis to the Right
To ensure that an axis is always to the desired side of the chart, you could set its corresponding AxisCrossingValue to a very large value such as int.MaxValue or int.MinValue.
This approach can work for both numerical and categorical axes. The example below uses a categorical axis.
Example of setting a crossing point that is very large so the value axis appears on the right hand side of the chart