SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components



i’d like to style my major and minor grid lines so that they are not visible over the whole width of the chart but only in the center.
I tried to asign them a LinearGradientBrush, but that did not show the Gridline at all, clipping did not change anything on the visual appearance of the Gridlines. Are these stylings not supported for grid lines?

My styling of grid lines and axes look as the following:

<Setter Property="MajorGridLineStyle">
        <Style TargetType="{x:Type Line}">
            <Setter Property="Stroke" Value="DarkRed" />
            <Setter Property="StrokeThickness" Value="1" />
<Setter Property="MinorGridLineStyle">
        <Style TargetType="{x:Type Line}">
            <Setter Property="Stroke" Value="Gray" />
            <Setter Property="StrokeThickness" Value="1" />
            <s:NumericAxis VisibleRange="{Binding ScaleBarRange}"
                           Style="{StaticResource ScaleStyle}">
            <s:NumericAxis Visibility="Collapsed"
                           DrawMajorGridLines="False" />

I attached an image that shows approximately how i’d like it to be and i already have a workaround using two surfaces overlayed over each other, but that one i’d really like to get rid of.
I’d be thankful for a hint that allows me to individually crop/clip grid lines.


  • You must to post comments

Hi Martin,

That’s not possible with SciChart out of the box I’m afraid. the Gridline Style is used to translate into drawing commands which are drawn using our software or DirectX renderer (not with WPF) so setting properties like alignment won’t work.

What you can do however is to use our APIs to draw directly onto the axis surface.

Have a look at overriding AxisBase (e.g. inherit from NumericAxis) and overriding DrawGridLines. Something like this:

public class NumericAxisEx : NumericAxis
    protected virtual void DrawGridLine(IRenderContext2D renderContext, Style gridLineStyle, IEnumerable<float> coordsToDraw)
        var direction = IsHorizontalAxis ? XyDirection.XDirection : XyDirection.YDirection;

        LineToStyle.Style = gridLineStyle;
        ThemeManager.SetTheme(LineToStyle, ThemeManager.GetTheme(this));

        using (var linePen = renderContext.GetStyledPen(LineToStyle))
            if (linePen == null || linePen.Color.A == 0) return;

            foreach (var coord in coordsToDraw)
                DrawGridLine(renderContext, linePen, direction, coord);

    /// <summary>
    /// Draws a single grid line on the <see cref="RenderSurface"/>, using the specified Style (TargetType <see cref="Line"/>), <see cref="XyDirection"/> and integer coordinate.
    /// </summary>
    /// <remarks>If direction is <see cref="XyDirection.XDirection"/>, the coodinate is an X-coordinate, else it is a Y-coordinate</remarks>
    /// <param name="renderContext">The <see cref="IRenderContext2D"/> instance to draw to</param>
    /// <param name="linePen">The pen (TargetType <see cref="IPen2D"/>) to apply to the grid line</param>
    /// <param name="direction">The X or Y direction to draw the  </param>
    /// <param name="atPoint">The integer coordinate to draw at. If direction is <see cref="XyDirection.XDirection"/>, the coodinate is an X-coordinate, else it is a Y-coordinate</param>
    protected virtual void DrawGridLine(IRenderContext2D renderContext, IPen2D linePen, XyDirection direction, float atPoint)
        var renderSurface = RenderSurface;
        if (renderSurface == null) return;

        var strokeThickness = linePen.StrokeThickness;
        // Add strokeThickness to cut off line's round ends
        var pt1 = direction == XyDirection.YDirection
            ? new Point(-strokeThickness, atPoint)
            : new Point(atPoint, -strokeThickness);
        var pt2 = direction == XyDirection.YDirection
            ? new Point(renderSurface.ActualWidth + strokeThickness, atPoint)
            : new Point(atPoint, renderSurface.ActualHeight + strokeThickness);

        // HERE: Change pt1 and pt2 X to make the line shorter 
        renderContext.DrawLine(linePen, pt1, pt2);

You will need version which is building now and wil be published to NuGet shortly, as I made some methods virtual and public so that this will work.

Best regards,

  • Martin Godec
    Hi Andrew, thanks to your answer, since i did update already to the newest version i’ll most likely give it a try when i’ve time. Best, Martin
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.