DxChartValueAxis Class

Contains settings for the value axis.

Assembly: DevExpress.Blazor.v24.1.dll

Declaration

public class DxChartValueAxis :
    DxChartAxis<ChartValueAxisModel>

Remarks

The value axis displays the chart’s numeric values. The DxChart component allows you to specify two axes and define their position, text, scale breaks, and so on.

You can add the following child components to the value axis:

DxChartAxisLabel - Defines settings for axis labels.
DxChartConstantLine - Specifies an axis constant line.
DxChartAxisTitle - Defines an axis title.
ZeroAlwaysVisible - Specifies whether the value axis should always display zero.

<DxChart Data="@forecasts">
    <DxChartTitle Text="Weather Forecast">
        <DxChartSubTitle Text="(10 days)" />
    </DxChartTitle>
    <DxChartArgumentAxis>
        <DxChartAxisTitle Text="Date" />
        <DxChartAxisLabel Format="ChartElementFormat.ShortDate" />
    </DxChartArgumentAxis>
    <DxChartValueAxis>
        <DxChartAxisTitle Text="Precipitation, mm" />
        <DxChartConstantLine Value="@(2.59)">
            <DxChartConstantLineLabel Text="Average"
                                      HorizontalAlignment="HorizontalAlignment.Right"
                                      Position="RelativePosition.Outside" />
        </DxChartConstantLine>
        <DxChartAxisLabel Format="ChartElementFormat.Decimal()"></DxChartAxisLabel>
    </DxChartValueAxis>
    <DxChartBarSeries ArgumentField="@((WeatherForecast i) => i.Date)"
                      ValueField="@((WeatherForecast i) => i.Precipitation)"
                      Name="Precipitation">
    </DxChartBarSeries>
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
</DxChart>

The image below shows axis elements:

Charts - Axis Elements

You can also use the following properties to configure the axis:

Name - Specifies the name of the value axis.
Type - Specifies an axis type.
SideMarginsEnabled - Specifies whether the component should add margins between the outermost series points and the chart boundaries.
EndOnTick - Specifies whether an axis should start and end on ticks.
Alignment - Specifies the pane edge next to which to place an axis.
Inverted - Specifies whether an axis is inverted.
Offset - Specifies the shift of an axis.
CustomPosition - Specifies the position of an axis on another axis.

<DxChart Data="@forecasts" LabelOverlap="ChartLabelOverlap.Hide">
    @*...*@
    <DxChartValueAxis Name="Temperature" 
                      Alignment="ChartAxisAlignment.Far" 
                      SideMarginsEnabled="true" 
                      EndOnTick="false" 
                      Type="ChartAxisType.Continuous">
        <DxChartAxisTitle Text="Temperature, C" />
    </DxChartValueAxis>

    <DxChartBarSeries ArgumentField="@((WeatherForecast i) => i.Date)"
                      ValueField="@((WeatherForecast i) => i.Precipitation)"
                      Name="Precipitation">
    </DxChartBarSeries>

    <DxChartLineSeries ArgumentField="@((WeatherForecast i) => i.Date)"
                       ValueField="@((WeatherForecast i) => i.TemperatureC)"
                       Name="Temperature"
                       Axis="Temperature">
    </DxChartLineSeries>
    @*...*@
</DxChart>

Charts - Value axis position