Changing visible range redraws the chart in a weird way

Hi there,

I created a Codepen to reproduce this here.

You’re doing nothing wrong in code, and you are setting visibleRange correctly.

The reason you are seeing this is because of aliasing. There are 50,000 points in your example with random amplitude from 0.0 – 1.0 and mountain fill on a chart which has maybe 1,000 – 2,000 pixels width. So approx 25-50 random peaks per pixel.

SciChart is hardware accelerated (using WebGL and the GPU for rendering) and on graphics devices, any triangle that is smaller than the size of a pixel gets culled automatically by the GPU. So, as the chart scrolls, you can see sometimes a peak which is brought into view and on the next draw after being shifted by a fraction of a pixel it is no longer visible.

To summarise: the choice of data here (very noisy) is resulting in a noisy output.

This sample and codepen is improved greatly if you use strokeThickness: 1 (not 0.1). I suggest using opacity instead on stroke if you want a softer outline to the mountain series. Also datasets which are less random should appear much smoother as they are scrolled. For example: this random walk dataset:

  // Random data results in very thin triangles which could be < 1 pixel size and cause aliasing
  // const array = new Array(50_000).fill(0).map(val => Math.max(Math.random(), 0));

  // Random walk test 
  const array = [];
  array.push(0);
  for(let i = 1; i < 50000; i++) {
    array.push(array[i-1] + (Math.random() - 0.5) * 0.01);
  }
  const array2 = new Array(50000).fill(0).map((val, index) => index);

  const dataSeries = new XyDataSeries(wasmContext)
  dataSeries.appendRange(array2, array);

  const series = new FastMountainRenderableSeries(wasmContext, {
    stroke: '#00000033',
    fill: '#005B96',
    strokeThickness: 1, // Don't set strokeThickness: 0.1, try 1.0 and opacity on stroke or 0.0
    zeroLineY: 0,
    dataSeries,
  })

looks much nicer when scrolled right to left.

Let me know if this helps,

Best regards
Andrew