Pre loader

Performance issue related to rolloverModifier


In our app we have a feature by which user can add indicators. These indicators can consist of 2 or a maximum of 4 lines.

We don’t want to render svg tooltips(which setted up by the default) with data for each line, instead of that we get point data and pass it to our app inner service that can render indicator legend.

To prevent default tooltips from being displayed we set for each renderable series of an indicator the following values.

rolloverModifierProps.width = 0; rolloverModifierProps.height = 0;

But of course tooltips are still rendered in the DOM and this leads to performance issues when we have 3 or more indicators of this type.

My question is the following

How we can render only circles svg for rollover modifier and completely dont render svg for tooltips in the DOM?

This is what the indicators look like

  • You must to post comments

Hi Sergey,

Have you profiled this? I would suspect the issue is not the rendering of tooltips in the DOM or SVG, but the Hit-Test algorithm used by the RolloverModifier to get the x,y point at mouse location. This is still un-optimised and a lot of potential for improvement.

Can you do two things?

  1. profile the code using Performance Profiler in Firefox Developer edition. This provides very high detailed profiling results and will tell you line by line what code is using time

  2. Send us code for how you’ve configured the RolloverModifier and setup the data in XyDataSeries. This matters as there are several modes & some use more CPU than others. For example. if your data is unsorted in X-direction (which can happen by mistake) then Rolllover must use a slower method to find X,Y points at a mouse coordinate.

  3. Finally tell us some stats about number of data points in the chart & number of series

A full working sample in Codesandbox would be helpful but not necessary to reproduce this. Just some info as above

Best regards

  • You must to post comments

I did what you asked and here are the results

  1. I profiled using FF dev tools and i see the same as in chrome dev-tools. The most cosumable task is drawing line annotations I have attached a performance profile screenshot so you can see for yourself.
  2. Here is cofiguration of RolloverModifier and DataSiries in out app


const { wasmContext, sciChartSurface } = chart;
    this.seriesData = new XyDataSeries(wasmContext); // All data series are configured this way
    this.series = new FastMountainRenderableSeries(wasmContext, { dataSeries: this.seriesData });
    this.series.rolloverModifierProps.width = 0;
    this.series.rolloverModifierProps.height = 0;


const rolloverModifier = new RolloverModifier({
      showRolloverLine: true,
      modifierGroup: this._groupId,
      rolloverLineStrokeThickness: 1,

Chart performance begins to drop noticeably starts from 4 sub-charts each of which consists of 3 rendereble series in 268+ data points per each. Also with main chart which consist of 2 renderable series in 268+ data points per each chart line

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies