Axis Grid Lines

• May 30, 2022

You can display horizontal and vertical axis grid lines to make the chart’s data easier to read. There are two types of grid lines: major and minor. Initially, Y-axis major grid lines are visible.

The table below lists grid line customization options.

Property	Description
AxisBase.GridLinesBrush	Gets or sets the major grid line color.
AxisBase.GridLinesMinorBrush	Specifies the minor grid line color.
AxisBase.GridLinesStrokeStyle	Specifies the line style settings for major grid lines.
AxisBase.GridLinesMinorStrokeStyle	Specifies the line style settings for minor grid lines.
AxisBase.ShowMajorGridlines	Specifies whether to show major gridlines.
AxisBase.ShowMinorGridlines	Specifies whether to show minor gridlines.
AxisBase.GridSpacing	Gets or sets the interval between axis gridlines.
AxisBase.GridSpacingAuto	Specifies whether the chart automatically calculates the distance between gridlines based on the major tickmarks.

The following example enables major and minor grid lines for X and Y-axes and customizes their appearance:

XAML

<Window
    xmlns:Charts="using:DevExpress.WinUI.Charts" 
    xmlns:Core="using:DevExpress.WinUI.Drawing">
    <Grid>
        <Charts:CartesianChart>
            <!--...-->
            <Charts:CartesianChart.AxisX>
                <Charts:AxisX x:Name="axisX"
                              ShowLine="True"
                              ShowMajorGridlines="True"
                              ShowMinorGridlines="True"
                              GridLinesBrush="CornflowerBlue" 
                              GridLinesMinorBrush="LightSteelBlue">
                    <Charts:AxisX.GridLinesMinorStrokeStyle>
                        <Core:StrokeStyle DashArray="1 3 1"/>
                    </Charts:AxisX.GridLinesMinorStrokeStyle>
                </Charts:AxisX>
            </Charts:CartesianChart.AxisX>
            <Charts:CartesianChart.AxisY>
                <Charts:AxisY x:Name="axisY" 
                              ShowLine="True" 
                              ShowMinorGridlines="True" 
                              GridLinesBrush="CornflowerBlue"
                              GridLinesMinorBrush="LightSteelBlue">
                    <Charts:AxisY.GridLinesMinorStrokeStyle>
                        <Core:StrokeStyle DashArray="1 3 1"/>
                    </Charts:AxisY.GridLinesMinorStrokeStyle>
                </Charts:AxisY>
            </Charts:CartesianChart.AxisY>
        </Charts:CartesianChart>
    </Grid>
</Window>