Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxChartAxisTick Class

Stores the appearance settings of major axis ticks.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxChartAxisTick :
    DxSettingsComponent<ChartAxisTickModel>

#Remarks

Use DxChartAxisTick objects to customize settings of major axis ticks in the following components:

DxChart<T>
A control that visualizes bound data as graphs: bar, area, line, and others.
DxPolarChart<T>
A control that visualizes bound data as graphs in polar coordinates.

Major ticks divide an axis into sections that mark values on this axis. Minor ticks divide an axis segment between two neighboring major ticks. Minor ticks cannot be displayed on the axis of Discrete type.

DxChart Axis Ticks

Use the DxChartAxisTick class to customize appearance of major ticks and the DxChartAxisMinorTick class for minor ticks.

The Chart’s default axes show major ticks. Set the Visible property to false to hide them.

You can use the following properties to customize tick appearance:

Color
Specifies the tick color.
Opacity
Specifies the tick transparency.
Shift
Shifts minor ticks relative to an axis line.
Length
Specifies the tick length.
Width
Specifies the tick width.

You should specify these properties in the component’s markup as shown in the snippet below:

Razor
@using Chart.Data
@using System.Drawing;

<DxChart Data="@forecasts">
    <DxChartLineSeries ArgumentField="@((WeatherForecast i) => i.Date)"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       Name="Temperature, F" />
    <DxChartValueAxis>
        <DxChartAxisTick Color="Color.Red" Opacity="0.5" />
    </DxChartValueAxis>
</DxChart>

Opaque minor ticks

You can also use the following properties to specify how to position ticks on an axis:

  • TickInterval: Specifies the interval between major ticks. Does not apply to discrete axes.
  • DiscreteDivisionMode: Specifies whether ticks and grid lines lie between or next to axis labels.
  • DivisionFactor: Specifies the minimum distance between two neighboring major ticks.

The following code snippet places grid lines and ticks next to axis labels (DiscreteDivisionMode="ChartDiscreteAxisDivisionMode.CrossLabels"):

Razor
<DxChart Data="@dataSource">
    <DxChartBarSeries Name="2017"
                      Filter="@((SaleInfo s) => s.Date.Year == 2017)"
                      ArgumentField="@(s => s.Region)"
                      ValueField="@(s => s.Amount)"
                      SummaryMethod="Enumerable.Sum" />
    <DxChartBarSeries Name="2018"
                      Filter="@((SaleInfo s) => s.Date.Year == 2018)"
                      ArgumentField="@(s => s.Region)"
                      ValueField="@(s => s.Amount)"
                      SummaryMethod="Enumerable.Sum" />
    <DxChartBarSeries Name="2019"
                      Filter="@((SaleInfo s) => s.Date.Year == 2019)"
                      ArgumentField="@(s => s.Region)"
                      ValueField="@(s => s.Amount)"
                      SummaryMethod="Enumerable.Sum" />
    <DxChartArgumentAxis Type="ChartAxisType.Discrete"
                         DiscreteDivisionMode="ChartDiscreteAxisDivisionMode.CrossLabels" />
    <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
</DxChart>

DiscreteDivisionMode = CrossLabels

#Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.Internal.ChartAxisTickModel>
DxChartAxisTick
See Also