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

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.


A question was just asked on Priority Support tickets on how to centre columns between data-values, and have each column join together with the next.

Our standard FastColumnRenderableSeries does allow columns to be touch each other by using the property DataPointWidth = 1.0. However, the columns are still centred on data-points.

Below we propose a workaround to achieve this desired visual affect

enter image description here

  • You must to post comments

To achieve the desired effect, we noticed that the Column Series bears many similarities with our Digital Mountain series.

To get a Digital Mountain Series, use FastMountainRenderableSeries with IsDigitalLine = true. You can see a demo of Digital Mountain Charts here.

Custom Mountain Renderable Series

Here is our custom renderable series, which inherits FastMountainRenderableseries and overrides InternalDraw. We allow the base mountain series to draw, then draw separator lines between ‘columns’ at each data-point.

public class CustomMountainSeries : FastMountainRenderableSeries
    public CustomMountainSeries()
        this.IsDigitalLine = true;

    protected override void InternalDraw(IRenderContext2D renderContext, IRenderPassData renderPassData)
        // Draw base mountain 
        base.InternalDraw(renderContext, renderPassData);

        // Get the coordinate calculators for coordinate transformation 
        var xCalc = renderPassData.XCoordinateCalculator;
        var yCalc = renderPassData.YCoordinateCalculator;

        // Get the pixel coord for 'zero' on this series 
        double zeroCoordY = yCalc.GetCoordinate(ZeroLineY);

        const double separatorLineOpacity = 1.0; // adjust this to get feint lines between 'columns'

        // Draw lines to zero separating columns
        using (var pen = renderContext.CreatePen(SeriesColor, AntiAliasing, StrokeThickness, separatorLineOpacity))
            var pointSeries = renderPassData.PointSeries;

            for (int i = 0; i < pointSeries.Count; i++)
                // Draw a vertical line to separate 'columns'                    
                var startPoint = new Point(xCalc.GetCoordinate(pointSeries.XValues[i]), yCalc.GetCoordinate(pointSeries.YValues[i]));
                var endPoint = new Point(xCalc.GetCoordinate(pointSeries.XValues[i]), zeroCoordY);
                renderContext.DrawLine(pen, startPoint, endPoint);

Here is the result!

SciChart Custom Column Series


To use it, simply include the CustomMountainSeries in your SciChartSurface as follows:

   <!--  Create the chart surface  -->
    <s:SciChartSurface Name="sciChart"

        <!--  Declare RenderableSeries  -->
            <createSimpleChart:CustomMountainSeries x:Name="mSeries" 
                                            StrokeThickness="2" />

        <!--  Create an X Axis  -->

        <!--  Create a Y Axis  -->
            <s:NumericAxis GrowBy="0.1, 0.1" DrawMajorBands="True"/>

  • You must to post comments
Showing 1 result