SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


Hello, I need to use tooltips to display information to users. However, after using the tooltip, there will be a jam after the tooltip appears and when zooming. How can I optimize the performance.

The following is the code. I use the js example: “Load 500 Series x 500 Points Performance Demo” for transformation

import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import {
} from "scichart/Charting/ChartModifiers/RolloverModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { SciChartSurface } from "scichart";
import {
} from "scichart/Charting/Model/XyDataSeries";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAutoRange } from "scichart/types/AutoRange";
import { convertRgbToHexColor } from "scichart/utils/convertColor";
// eslint-disable-next-line

const divElementId = "scichart-root";

const color = "#368BC1";

const SERIES = 1500;
const POINTS = 188;

const drawExample = async (updateTimeSpans) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId,{ widthAspect: 3, heightAspect: 2}
  const xAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(0, POINTS),
    autoRange: EAutoRange.Never
const dataSeriesArray= new Array(SERIES);;
const rendSeriesArray=new Array(SERIES);
const yAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(-5000, 5000),
    autoRange: EAutoRange.Never
// yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
for (let i = 0; i < SERIES; i++) {
  const dataSeries= new XyDataSeries(wasmContext);
  const rendSeries= new FastLineRenderableSeries(wasmContext, {
     stroke: color,
      strokeThickness: 3,
      pointMarker: new EllipsePointMarker(wasmContext, {
        width: 5,
        height: 5,
        strokeThickness: 2,
        fill: "white",
        stroke: color
  dataSeriesArray[i] = dataSeries;
  rendSeriesArray[i] = rendSeries;
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier(),new RolloverModifier(wasmContext));
const loadPoints = () => {
  const newTimeSpans=[];

  // Start counting Points generation time
  const generateTimestamp =;

  const xValuesArray = new Array(SERIES);
  const yValuesArray = new Array(SERIES);
  const strokeArray =  new Array(SERIES);
  for (let i = 0; i < SERIES; i++) {
      // Allocate data arrays
      xValuesArray[i] = new Array(POINTS);
      yValuesArray[i] = new Array(POINTS);

      // Clear data, if any

      // Generate stroke
      const r = Math.random();
      const g = Math.random();
      const b = Math.random();
      strokeArray[i] = convertRgbToHexColor(r, g, b);

      // Generate points
      let prevYValue = 0;
      for (let j = 0; j < POINTS; j++) {
          const curYValue = Math.random() * 10 - 5;

          xValuesArray[i][j] = j;
          yValuesArray[i][j] = prevYValue + curYValue;

          prevYValue += curYValue;

  // Add the first time span: Generating 1M data points
      title: "Generate 500x500 Data Points",
      durationMs: - generateTimestamp

  // Start counting batch append time
  const appendTimestamp =;
  for (let i = 0; i < SERIES; i++) {
      dataSeriesArray[i].appendRange(xValuesArray[i], yValuesArray[i]);
      rendSeriesArray[i].stroke = strokeArray[i];

  // Add the second time span: Generation of data point
      title: "Append 500x500 Data Points",
      durationMs: - appendTimestamp

  // Subscribe to sciChartSurface.rendered event,
  // and calculate time duration between the append and
  // the first frame after it
  const firstFrameTimestamp =;
  let frameIndex = 0;
  let nextFramesTimestamp;
  const handler = () => {
      if (frameIndex === 0) {
          // Add the third time span: Render the first frame
              title: "Render the frame",
              durationMs: - firstFrameTimestamp
          nextFramesTimestamp =;
      } else {
          // Unsubscribe from sciChartSurface.rendered

          // Zoom extents at the end of performance measurement
      setTimeout(sciChartSurface.invalidateElement, 0);
      // Increment frame index

  • You must to post comments

I think having a 500 tooltips for for 500 series on the chart is a bit excessive so I’m not surprised you’re seeing a performance problem on this example (500 series x 500 points) when adding a tooltip.

  • Is your real application use-case like this (500 series and you need tooltips for all)?
  • What behaviour do you want in your real application?

Best regards,

  • You must to post comments

Hello, thank you for your help

About the problem you raised to help me solve the problem

  1. What I want is to display the tooltip of a single point when the mouse moves up?

  2. The effect I want to achieve is that you can see the trend chart of data and move the mouse to a single point to display tool tips. It is better to show and hide the lines of the same dataSeriesName in batches.

  • You must to post comments

Hi there

Try this technique: Override RolloverModifier to show tooltip only on a single datapoint.

Does that solve the problem?

Best regards,

  • You must to post comments

Thanks again for your help. I still have two problems here. I hope you can get your guidance

  1. The tooltip for a specific point does not appear on the upper halfshaft

Content description: I used your method to override the “RolloverModifier” class to implement tooltips for specific points, but the tooltips do not appear on the upper half axis. See here for details

2.. How to avoid page jam in scenarios where multiple lines are required

Content description: The performance of scichart in single line rendering data is amazing. My current requirement is to render multiple lines at one time (up to 1800 lines at most), and I hope that after the loading is completed, the tooltip of a specific point will appear smoothly when the mouse is moved. Is there a similar case for my reference?

  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.