Line series filled from right side of chart.

Hi Alex

Clamping Axis.Visiblerange in SciChart WPF can be achieved with a VisibleRangeChanged event handler

Take a look at Clipping the Axis.VisibleRange on Zoom and Pan

Clipping Axis.VisibleRange in Code To clip the VisibleRange and force a certain maximum or minimum, just use the following code:

axis.VisibleRangeChanged += (s, e) =>
  {
     // e is VisibleRangeChangedEventArgs
     // Assuming axis is NumericAxis
  
     if (e.NewVisibleRange != null && e.NewVisibleRange.Min < 0)
     {
        // Force minimum visiblerange to zero always
        ((NumericAxis)sender).VisibleRange = new DoubleRange(0, e.NewVisibleRange.Max);
     }
  };
  

There are other methods in there such as using VisibleRangeLimit but these have their limitations (no pun intended), such as not clamping when user zoom/pan occurs

Hi Andrew!
Happy to have a message from you again! And it is fun to start working with SciChart.JS!
Actually, we are not porting from WPF, although I have looked into the first product in which we used SciChart WPF (SpotTrack).

Actually, what happens is that when the X axis is flipped, the behaviour is simply mirrored, but that is not what we want. We want ‘now’ to be at the right edge, but with flipped axis, ‘now’ is moving towards the left edge.

So, I partly solved this another way: As the chart we want will operationally be filled with 2 hours of data, and we want, at least for now, to show the whole period while the chart is being filled with 4 parameters (stacked, as displayed in the attachment) at 1 Hz. I start with an xValue array of 7200 elements from 0 to 7199 and 4 yValue arrays filled with NaN. Then I use Array.shift() to remove array element 0 from all yValue arrays and pushing the last received parameter set to the end of these arrays. Then I use clear() and appendRange() to the scichart surface to set all points upon every new update. This gives the wanted visual effect.

I use NumericAxiz for the X axis, setting isStaticAxis to true, visibleRange to [0,7200] and autoRange.
This causes the xAxis to show axis tick labels in the wrong order, but I will try today to manipulate the xAxis inspired by SciChart examples to fix some reverse relation between the index and the label, as well as showing tick labels as minutes from 0 to -2:00.

I attach an image of how it looks with a period of 10 minutes mocked data as well as the TypeScript code of the component and our SciChartFactoryService. One of the images show the challenge of a correct value axis for heading measurements, where the valid range is [0,360). I will try to make a label provider taking into account the actual range around 0/360, which is important when heading varies between e.g. 358 and 2 degrees.

If you have any suggestions or hints on how to use SciChart better, I am all ears!
Thanks a lot for great SciChart support, although we have not yet purchased licenses! We will, of course!
Best regards,
Morten