Pre loader

Tuning/Performance implications with many series

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


I remember asking about something similar many years ago with WPF, but in browser the problem seems more apparent.

Using the current data model (I can be fairly flexible on the backend, and don’t necessarily have to do things this way), for some of the plots I generate many series that do some funky overlapping stuff (example attached). In the extreme examples, this can be thousands of series (the total number of data points might be < 100k).

In these cases, drawing basically grinds to a halt. Zooms take seconds, the OS starts complaining that chrome is locked up — you get the idea.

Is there a better way to approach this sort of plot? Are there any tuning recommendations for this scenario?

  • Andrew Burnett-Thompson
    Hi Dan, we can actually profile this by running code in Firefox Developer edition – which has a performance profiler similarly good to JetBrains dotTrace that we’re used to in .NET. However, to profile first we need a code sample to reproduce. If you can send something over in Codesandbox or Codepen, this would be very helpful. Find out how below: One of our performance demos which loads 500 series x 500 points (250k points total) can be found here If you click on the ‘Edit in CodeSandbox’ button it will open in a new tab an editable code sample which runs in the browser. Start off with that. Thanks!
  • Dan Santimore
    Thanks for the quick response! It took about 5 seconds in the code sandbox to try adding the rollover modifier and see an immediate drawing problem. Does that tally with expected performance issues? If there is not a way to improve the perf of that modifier (I can imagine that’s a tough one) I can always disable it when there are tons of series.
  • Dan Santimore
    Sure thing — I’ve tweaked the constants to add additional series (1000) and reduce the data points to 100 each. I’ve also added a constant for the rollover modifier; so you can flip that on and off to see the difference in drawing. My memory is fuzzy, but I think we have solved this the same way (turning off the rollover) around 10 years ago in WPF :) Flags in my data set are sortedInX = true and containsNan = false
  • Andrew Burnett-Thompson
    Thanks Dan, gonna discuss this at tomorrows standup. Just a question – Rollover shows tooltips for ALL series at once. So if you have 1,000 that’s 1,000 SVG tooltips (equivalent to WPF UIElement). Is that the desired behaviour? Or do you want a single tooltip for the currently hovered or topmost series
  • Dan Santimore
    Good point, just the closest match/hovered series. In my actual code I have this in there: const rollover = new RolloverModifier({ showRolloverLine: false, hitTestRadius: 15, }); I just updated the sample with that.
Best Answer


We’ve had a good look at this today and and found some decent improvements.

Firstly, RolloverModifier is really not designed for charts with very large numbers of series. CursorModifier is much closer to what you want, but even that will still report values for all the series in the hitTest radius. You can get it to return the nearest only with a fairly simple customization which I’ve demonstrated at

You would probably want to customize the tooltip content a bit. For documentation on that see

In looking at this I’ve fixed a few issues with tooltip placement for both rollover and cursor, and found a fairly significant optimization that can be applied to hitTest when the data is sorted. These need a bit of testing so might be a few days before we can release.

We are planning a very significant rework of the tooltip functionality fairly soon, so details of real life requirements really helps us to refine the design of this.


  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.