How to Make Line Series draw to the right-edge of the chart
Posted by Andrew BT on 11 February 2019 06:30 PM

Sometimes people ask us how they can draw Line Series to the right-edge of the chart. There's no built in way to do this yet, but there is a workaround:

*These steps apply to SciChart v3.1 or higher*

Follow these steps:

  1. Create a new class called DigitalLineSeries which inherits FastLineRenderableSeries
  2. In your DigitalLineSeries class, set IsDigitalLine = True, and add a dependency property DrawLineToEnd
  3. Override InternalDraw. Here we are going to take the last point and draw a line to the viewport right edge using the IRenderContext2D interface

 *Note: For more information on IRenderContext2D, please see The IRenderContext API article.

 These steps result in the code below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Drawing.Common;

namespace SciChart.Examples.Examples.CreateSimpleChart
    public class DigitalLineRenderableSeriesEx: FastLineRenderableSeries
        public static readonly DependencyProperty DrawLineToEndProperty = DependencyProperty.Register(
            "DrawLineToEnd", typeof(bool), typeof(DigitalLineRenderableSeriesEx), new PropertyMetadata(true));

        public DigitalLineRenderableSeriesEx()
            // Make Line Series a digital (step) line
            IsDigitalLine = true;

        public bool DrawLineToEnd
            get { return (bool)GetValue(DrawLineToEndProperty); }
            set { SetValue(DrawLineToEndProperty, value); }

        protected override void InternalDraw(IRenderContext2D renderContext, IRenderPassData renderPassData)
            // Draw entire series in the base implementation
            base.InternalDraw(renderContext, renderPassData);

            // Draw a line to the right edge
            if (DrawLineToEnd)
                var dataToRender = renderPassData.PointSeries;
                var viewportWidth = renderContext.ViewportSize.Width;

                var lastYDataValue = dataToRender.YValues.Last();
                var lastXDataValue = dataToRender.XValues.Last();

                var lastYCoordinate = renderPassData.YCoordinateCalculator.GetCoordinate(lastYDataValue);
                var lastXCoordinate = renderPassData.XCoordinateCalculator.GetCoordinate(lastXDataValue);

                using (var pen = renderContext.CreatePen(Stroke, AntiAliasing, StrokeThickness, Opacity, StrokeDashArray))
                    renderContext.DrawLine(pen, new Point(lastXCoordinate,lastYCoordinate), new Point(viewportWidth, lastYCoordinate));

It will draw a line to the right edge of the viewport always, as it is shown on the screenshot below:

Further Reading

For more details about SciChart APIs, please refer to the following documentation articles:

(1 vote(s))
Not helpful


Not sure where to start? Contact us, we are happy to help!


SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725