Skip to main content

DxChartValueAxis Class

Contains settings for the value axis.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.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:

<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

Charts - Properties

Run Demo: Charts - Multiple Axes

Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.Internal.ChartValueAxisModel>
DxComplexSettingsComponent<DxChartAxis<DevExpress.Blazor.Internal.ChartValueAxisModel>, DevExpress.Blazor.Internal.ChartValueAxisModel>
DxChartAxis<DevExpress.Blazor.Internal.ChartValueAxisModel>
DxChartValueAxis
See Also