How can I customize the chart grid lines?

1 min read

Description

This article describes about customizing the axis grid lines by using the Style in the SfChart.

Solution

The grid lines in the axis can be customized by using the MajorGridLineStyle property of the axis. A Style with the TargetType as Line is bind to the MajorGridLineStyle property with its key.

XAML

<Window.Resources>
                <Style x:Key="lineStyle1" TargetType="Line" >
            <Setter Property="Stroke" Value="DarkBlue"/>
            <Setter Property ="StrokeDashArray" Value="2,2"/>
            <Setter Property="StrokeThickness" Value="6"/>
        </Style>
                <Style x:Key="lineStyle2" TargetType="Line" >
            <Setter Property="Stroke" Value="DarkTurquoise"/>
            <Setter Property ="StrokeDashArray" Value="2,2"/>
            <Setter Property="StrokeThickness" Value="2"/>
        </Style>
        </Window.Resources>
<syncfusion:SfChart.PrimaryAxis >
<syncfusion:CategoryAxis Header="Product"
<!--The style is applied to the grid lines--> MajorGridLineStyle="{StaticResource lineStyle1}" FontSize="20" />
 </syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis Header="Quantity Sold" MajorGridLineStyle="{StaticResource lineStyle2}" FontSize="20"/>
</syncfusion:SfChart.SecondaryAxis>

Output

The following screenshot illustrates the output for the stylized gridlines.

$F:\Issue Files Chart\Issue File -10 Knowledge Base\WP_ScreenShot\New Second TIme\wp_ss_20150210_0043.png$

Figure 1: Axes with customized grid lines

Did you find this information helpful?

Yes

Comments (0)

How can I customize the chart grid lines?

Access denied