Knowledgebase: Tips and Tricks
How to Make Line Series draw to the right-edge of the chart
Posted by Andrew BT on 02 May 2014 05:44 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))
Helpful
Not helpful

CONTACT US

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


CONTACT US

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