DxChartValueAxis Class

Contains settings for the value axis.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.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="ChartAxisLabelFormat.ShortDate" />

    </DxChartArgumentAxis>
    <DxChartValueAxis>
        <DxChartAxisTitle Text="Precipitation, mm" />
        <DxChartConstantLine Value="@(2.59)">
            <DxChartConstantLineLabel Text="Average"
                                      HorizontalAlignment="HorizontalAlignment.Right"
                                      Position="RelativePosition.Outside" />
        </DxChartConstantLine>
        <DxChartAxisLabel Format="ChartAxisLabelFormat.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.
  • Position - Specifies the axis position.
  • 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.
<DxChart Data="@forecasts" LabelOverlap="ChartLabelOverlap.Hide">
    @*...*@
    <DxChartValueAxis Name="Temperature" 
                      Position="HorizontalEdge.Right" 
                      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 - 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