Uncaught TypeError: Passing a number "-1"

[hecto932]

Hey guys,

Many times when I'm adding data to the chart I'm getting this uncaught error when I'm adding data to the chart:

Could you please tell me what could it be?

thanks

[andyb1979]

Hey Hector

Not seen it before but it looks like a type conversion between javascript and WebAssembly. Can you send us a sample of code that reproduces the error? Hit test in the stack trace suggests cursors or tooltips are being used if that helps repro

Best regards, Andrew

On Mon, 22 Feb 2021 at 22:43, Hector Jose Flores Colmenarez < notifications@github.com> wrote:

Hey guys,

Many times when I'm adding data to the chart I'm getting this uncaught error:

[image: image] https://user-images.githubusercontent.com/5354758/108779616-5e855180-7524-11eb-9c43-4091ded602a5.png

Could you please tell me what could it be?

thanks

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ABTSoftware/SciChart.JS.Examples/issues/43, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADLEDVP26FS64YOAIDUASGDTALMXLANCNFSM4YBMBBNQ .

[hecto932]

Here the complete error in console

I think that it could be that the timestamp values are bigger than expected

I'll work on some example

[hecto932]

Ok guys, sorry for late.

I've been working on some example for you:

const columns = ['VALUE_A', 'VALUE_B', 'VALUE_C']
const data = [
  [
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612208940000
    },
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209000000
    },
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209060000
    },
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209120000
    },
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209180000
    },
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209240000
    },
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209300000
    },
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209360000
    },
    {
      "VALUE_A": 167.6608,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209420000
    },
    {
      "VALUE_A": 167.6927,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209480000
    },
    {
      "VALUE_A": 167.747,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209540000
    },
    {
      "VALUE_A": 167.8042,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209600000
    },
    {
      "VALUE_A": 167.8793,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209660000
    },
    {
      "VALUE_A": 167.9633,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209720000
    },
    {
      "VALUE_A": 168.0597,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209780000
    },
    {
      "VALUE_A": 168.1733,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209840000
    },
    {
      "VALUE_A": 168.2884,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209900000
    },
    {
      "VALUE_A": 168.3883,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612209960000
    },
    {
      "VALUE_A": 168.5152,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210020000
    },
    {
      "VALUE_A": 168.6691,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210080000
    },
    {
      "VALUE_A": 168.9379,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210140000
    },
    {
      "VALUE_A": 169.2598,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210200000
    },
    {
      "VALUE_A": 169.6442,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210260000
    },
    {
      "VALUE_A": 170.0544,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210320000
    },
    {
      "VALUE_A": 170.4789,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210380000
    },
    {
      "VALUE_A": 170.7599,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210440000
    },
    {
      "VALUE_A": 170.856,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210500000
    },
    {
      "VALUE_A": 171.0672,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210560000
    },
    {
      "VALUE_A": 171.2867,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210620000
    },
    {
      "VALUE_A": 171.5556,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210680000
    },
    {
      "VALUE_A": 171.7607,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210740000
    },
    {
      "VALUE_A": 171.9235,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210800000
    },
    {
      "VALUE_A": 172.0627,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210860000
    },
    {
      "VALUE_A": 172.2566,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210920000
    },
    {
      "VALUE_A": 172.2787,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612210980000
    },
    {
      "VALUE_A": 172.2787,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612211040000
    },
    {
      "VALUE_A": 172.2787,
      "VALUE_B": 0,
      "VALUE_C": 0,
      "timestamp": 1612211100000
    }
  ],
  [],
  []
]

I'm not pretty sure, but it looks that something is happening with the cursor modifiers

Here is how I'm loading the data to the chart.

const addLineDataSeries = (
    sciChartSurface: SciChartSurface,
    wasmContext: TSciChart,
    data: Array<any>,
    options: any,
  ) => {
    if (columns.length && data.length) {
      // This remove the previous data and allows create a new rendableSerie
      if (sciChartSurface && options?.deletePreviousData) {
        sciChartSurface.renderableSeries.clear();
      }
      console.log(columns, JSON.stringify(data));
      columns.forEach((columnName: string, index: number) => {
        const xyDataSeries = new XyDataSeries(wasmContext);
        xyDataSeries.dataSeriesName = columnName;
        const fastLineRenderableSeriesOptions: any = {
          stroke: randomColor(),
          strokeThickness: 3,
          dataSeries: xyDataSeries,
        };
        if (options?.lineSeriesOptions && options?.lineSeriesOptions?.pointMarkers) {
          fastLineRenderableSeriesOptions.pointMarkers = new EllipsePointMarker(wasmContext, {
            width: 5,
            height: 5,
            strokeThickness: 3,
            fill: 'white',
            stroke: 'white',
          });
        }
        const lineSeries = new FastLineRenderableSeries(
          wasmContext,
          fastLineRenderableSeriesOptions,
        );
        xyDataSeries.appendRange(
          data[index].map((item: any) => item.dts),
          data[index].map((item: any) => item[columnName]),
        );
        sciChartSurface.renderableSeries.add(lineSeries);
      });
    }
  };

If you need something more, please don't hesitate to ask me

Regards

[hecto932]

Here one more screenshot of what I got when I pass the mouse cursor on the chart.

It's getting the error many times while I'm into the chart.

[andyb1979]

Thanks Hector! I've created a task in our issue tracker here. https://abtsoftware.myjetbrains.com/youtrack/issue/SCJS-481

We will notify you when we have an update

Thanks for reporting!

[klishevich]

Hi @hecto932 I tried to reproduce the problem with the similar code, but have not succeeded. Everything works fine. I believe I need a sample project with this error to fix it.

This is the code I used:

export const drawExample = async () => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
    const xAxis = new NumericAxis(wasmContext);
    xAxis.labelProvider.numericFormat = ENumericFormat.Date_HHMM;
    xAxis.axisAlignment = EAxisAlignment.Left;
    sciChartSurface.xAxes.add(xAxis);

    const yAxis = new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) });
    yAxis.axisAlignment = EAxisAlignment.Bottom;
    yAxis.flippedCoordinates = true;
    sciChartSurface.yAxes.add(yAxis);

    const lineSeries = new FastLineRenderableSeries(wasmContext, {
        drawNaNAs: ELineDrawMode.PolyLine,
        isDigitalLine: false
    });
    lineSeries.strokeThickness = 5;
    sciChartSurface.renderableSeries.add(lineSeries);
    lineSeries.stroke = "green";

    sciChartSurface.applyTheme(new SciChartJSLightTheme());

    const dataSeries = new XyDataSeries(wasmContext);
    dataSeries.append(1612208940000, 167.6608);
    dataSeries.append(1612209000000, 167.6608);
    dataSeries.append(1612209060000, 167.6608);
    dataSeries.append(1612209120000, 167.6608);
    dataSeries.append(1612209180000, 167.6608);
    dataSeries.append(1612209240000, 167.6608);
    dataSeries.append(1612209300000, 167.6927);
    dataSeries.append(1612209360000, 167.747);
    dataSeries.append(1612209420000, 167.8042);
    lineSeries.dataSeries = dataSeries;

    sciChartSurface.chartModifiers.add(new ZoomPanModifier());
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
    sciChartSurface.chartModifiers.add(new CursorModifier());

    setTimeout(() => {
        console.log("clear renderable series");
        sciChartSurface.renderableSeries.clear();

        const xyDataSeries = new XyDataSeries(wasmContext);
        xyDataSeries.dataSeriesName = "columnName";
        const fastLineRenderableSeriesOptions: any = {
            stroke: "red",
            strokeThickness: 3,
            dataSeries: xyDataSeries
        };
        fastLineRenderableSeriesOptions.pointMarkers = new EllipsePointMarker(wasmContext, {
            width: 5,
            height: 5,
            strokeThickness: 3,
            fill: "white",
            stroke: "white"
        });
        const lineSeries2 = new FastLineRenderableSeries(wasmContext, fastLineRenderableSeriesOptions);
        xyDataSeries.appendRange(
            [
                1612208940000,
                1612209000000,
                1612209060000,
                1612209120000,
                1612209180000,
                1612209240000,
                1612209300000,
                1612209360000,
                1612209420000
            ],
            [168, 168, 168, 168, 168, 169, 170, 172, 176]
        );
        sciChartSurface.renderableSeries.add(lineSeries2);
        sciChartSurface.zoomExtents();
    }, 3000);

    sciChartSurface.zoomExtents();
    return { sciChartSurface, wasmContext };
};

Best regards, Michael

[hecto932]

Hey, @klishevich thanks for the response.

I'll try to replicate your answer because I saw some differences.

However, I'm going to try to provide you completed example to looking into it better.

[andyb1979]

Yes please do Hector, our team spends a lot of time trying to reproduce issues reported by our userbase. It really is helpful to have the code / steps to repro straight away.

Best regards, Andrew

On Wed, Feb 24, 2021 at 6:42 PM Hector Jose Flores Colmenarez < notifications@github.com> wrote:

Hey, @klishevich https://github.com/klishevich thanks for the response.

I'll try to replicate your answer because I saw some differences.

However, I'm going to try to provide you completed example to looking into it better.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ABTSoftware/SciChart.JS.Examples/issues/43#issuecomment-785289390, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADLEDVOFYWTDFYFSF7IW3ITTAVB75ANCNFSM4YBMBBNQ .

[hecto932]

Hey @klishevich @andyb1979

This is the best sample I can give you. Basically is an entire react component:

import React, { FC, useState, useEffect } from 'react';
import { format } from 'date-fns';
import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
import { MouseWheelZoomModifier } from 'scichart/Charting/ChartModifiers/MouseWheelZoomModifier';
import { ZoomExtentsModifier } from 'scichart/Charting/ChartModifiers/ZoomExtentsModifier';
import { EAxisAlignment } from 'scichart/types/AxisAlignment';
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
import { XyDataSeries } from 'scichart/Charting/Model/XyDataSeries';
import {
  ELegendOrientation,
  ELegendPlacement,
} from 'scichart/Charting/Visuals/Legend/SciChartLegendBase';
import { FastLineRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries';
import { LegendModifier } from 'scichart/Charting/ChartModifiers/LegendModifier';
import { RolloverModifier } from 'scichart/Charting/ChartModifiers/RolloverModifier';
import { TSciChart } from 'scichart/types/TSciChart';

import { randomColor } from '../../utils';
import { ZoomPanModifier } from 'scichart/Charting/ChartModifiers/ZoomPanModifier';
import { NumberRange } from 'scichart/Core/NumberRange';
import { ENumericFormat } from 'scichart/types/NumericFormat';
import { ELineDrawMode } from 'scichart/Charting/Drawing/WebGlRenderContext2D';

const formatAxis = (tickItem: number) => format(tickItem, 'MM/dd HH:mm a');
const numberToFix = (tickItem: number) => tickItem.toFixed(2);

const draw = async (divElem: string, orientation: string = 'vertical', options: any) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElem);

  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext, { growBy: new NumberRange(0.01, 0.01) });

  xAxis.labelProvider.numericFormat = ENumericFormat.Date_DDMMYYYY;
  xAxis.labelProvider.formatLabel = formatAxis;

  yAxis.labelProvider.formatLabel = numberToFix;

  if (orientation === 'vertical') {
    // SET VERTICAL ORIENTATION BY DEFAULT
    xAxis.axisAlignment = EAxisAlignment.Left;
    yAxis.axisAlignment = EAxisAlignment.Bottom;

    // An axis may be optionally flipped using flippedCoordinates property
    xAxis.flippedCoordinates = false;
    yAxis.flippedCoordinates = true;
  } else {
    xAxis.axisAlignment = EAxisAlignment.Bottom;
    yAxis.axisAlignment = EAxisAlignment.Left;

    // An axis may be optionally flipped using flippedCoordinates property
    xAxis.flippedCoordinates = false;
    yAxis.flippedCoordinates = false;
  }

  // ADDING AXES TO SURFACE
  sciChartSurface.xAxes.add(xAxis);
  sciChartSurface.yAxes.add(yAxis);

  return { sciChartSurface, wasmContext };
};

const divElement = 'scichart-root';

interface Props {}

const Scichart: FC<Props> = () => {
  const [chartReady, setChartReady] = useState(false);
  const [sciChartSurface, setSciChartSurface] = useState<SciChartSurface>();
  const [wasmContext, setWasmContext] = useState<TSciChart>();

  const [sciChartTooltip, setSciChartTooltip] = useState<any>();
  const [sciChartLegend, setSciChartLegend] = useState<any>();

  const [sciChartRubberModifier, setSciChartRubberModifier] = useState<any>();

  const [placementValue, setPlacementValue] = useState<ELegendPlacement>(ELegendPlacement.TopRight);
  const [orientationValue, setOrientationValue] = useState<ELegendOrientation>(
    ELegendOrientation.Vertical,
  );

  const [showLegendValue, setShowLegendValue] = useState(true);
  const [showCheckboxesValue, setShowCheckboxesValue] = useState(true);
  const [showSeriesMarkersValue, setShowSeriesMarkersValue] = useState(true);

  const [orientation, setChartOrientation] = useState('vertical');

  const setOrientation = (orientation: string) => {
    const xAxis = sciChartSurface?.xAxes.get(0);
    const yAxis = sciChartSurface?.yAxes.get(0);

    if (xAxis && yAxis) {
      if (orientation === 'vertical') {
        // SET VERTICAL ORIENTATION BY DEFAULT
        xAxis.axisAlignment = EAxisAlignment.Left;
        yAxis.axisAlignment = EAxisAlignment.Bottom;

        // An axis may be optionally flipped using flippedCoordinates property
        xAxis.flippedCoordinates = false;
        yAxis.flippedCoordinates = true;
      } else {
        xAxis.axisAlignment = EAxisAlignment.Bottom;
        yAxis.axisAlignment = EAxisAlignment.Left;

        // An axis may be optionally flipped using flippedCoordinates property
        xAxis.flippedCoordinates = false;
        yAxis.flippedCoordinates = false;
      }
    }
  };

  const addLineDataSeries = (sciChartSurface: SciChartSurface, wasmContext: TSciChart) => {
    const columns = ['VALUE_A', 'VALUE_B', 'VALUE_C'];
    const data = [
      [
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612208940000,
        },
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209000000,
        },
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209060000,
        },
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209120000,
        },
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209180000,
        },
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209240000,
        },
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209300000,
        },
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209360000,
        },
        {
          VALUE_A: 167.6608,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209420000,
        },
        {
          VALUE_A: 167.6927,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209480000,
        },
        {
          VALUE_A: 167.747,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209540000,
        },
        {
          VALUE_A: 167.8042,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209600000,
        },
        {
          VALUE_A: 167.8793,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209660000,
        },
        {
          VALUE_A: 167.9633,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209720000,
        },
        {
          VALUE_A: 168.0597,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209780000,
        },
        {
          VALUE_A: 168.1733,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209840000,
        },
        {
          VALUE_A: 168.2884,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209900000,
        },
        {
          VALUE_A: 168.3883,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612209960000,
        },
        {
          VALUE_A: 168.5152,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210020000,
        },
        {
          VALUE_A: 168.6691,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210080000,
        },
        {
          VALUE_A: 168.9379,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210140000,
        },
        {
          VALUE_A: 169.2598,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210200000,
        },
        {
          VALUE_A: 169.6442,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210260000,
        },
        {
          VALUE_A: 170.0544,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210320000,
        },
        {
          VALUE_A: 170.4789,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210380000,
        },
        {
          VALUE_A: 170.7599,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210440000,
        },
        {
          VALUE_A: 170.856,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210500000,
        },
        {
          VALUE_A: 171.0672,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210560000,
        },
        {
          VALUE_A: 171.2867,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210620000,
        },
        {
          VALUE_A: 171.5556,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210680000,
        },
        {
          VALUE_A: 171.7607,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210740000,
        },
        {
          VALUE_A: 171.9235,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210800000,
        },
        {
          VALUE_A: 172.0627,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210860000,
        },
        {
          VALUE_A: 172.2566,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210920000,
        },
        {
          VALUE_A: 172.2787,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612210980000,
        },
        {
          VALUE_A: 172.2787,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612211040000,
        },
        {
          VALUE_A: 172.2787,
          VALUE_B: 0,
          VALUE_C: 0,
          dts: 1612211100000,
        },
      ],
      [],
      [],
    ];
    if (columns.length && data.length) {
      // This remove the previous data and allows create a new rendableSerie
      sciChartSurface.renderableSeries.clear();

      // Remove previous legends
      if (sciChartLegend && sciChartSurface.chartModifiers.contains(sciChartLegend)) {
        sciChartSurface.chartModifiers.remove(sciChartLegend);
      }

      columns.forEach((columnName: string, index: number) => {
        const xyDataSeries = new XyDataSeries(wasmContext);
        xyDataSeries.dataSeriesName = columnName;
        const lineSeries = new FastLineRenderableSeries(wasmContext, {
          drawNaNAs: ELineDrawMode.PolyLine,
          isDigitalLine: false,
          stroke: randomColor(),
          strokeThickness: 3,
          dataSeries: xyDataSeries,
        });
        xyDataSeries.appendRange(
          data[index].map((item: any) => item.dts),
          data[index].map((item: any) => item[columnName]),
        );
        sciChartSurface.renderableSeries.add(lineSeries);
      });
    }
    sciChartSurface.zoomExtents();
  };

  const setLegendModifier = (resScichartSurface: SciChartSurface) => {
    const legendModifier = new LegendModifier({
      placement: placementValue,
      orientation: orientationValue,
      showLegend: showLegendValue,
      showCheckboxes: showCheckboxesValue,
      showSeriesMarkers: showSeriesMarkersValue,
    });
    resScichartSurface.chartModifiers.add(legendModifier);
    setSciChartLegend(legendModifier);
  };

  const setTooltip = (resScichartSurface: SciChartSurface) => {
    if (resScichartSurface) {
      const tooltipModifier = new RolloverModifier({
        rolloverLineStroke: 'SteelBlue',
        rolloverLineStrokeThickness: 5,
        isVerticalChart: orientation === 'vertical',
      });

      tooltipModifier.onDetach = () => console.log('tooltip rolloverModifier removed!');
      tooltipModifier.onAttach = () => console.log('tooltip rolloverModifier attached');

      resScichartSurface.chartModifiers.add(tooltipModifier);
      setSciChartTooltip(tooltipModifier);
    }
  };

  const setZoomPanModifier = (resScichartSurface: SciChartSurface) => {
    const zoomPanModifier = new ZoomPanModifier();
    zoomPanModifier.onAttach = () => console.log('zoomPanModifier attached!');
    zoomPanModifier.onDetach = () => console.log('zoomPanModifier detached!');

    // Add Zoom Extents behavior
    resScichartSurface.chartModifiers.add(zoomPanModifier);
    setSciChartRubberModifier(zoomPanModifier);
  };

  const setMouseWheelZoomModifier = (resScichartSurface: SciChartSurface) => {
    const mouseWheelZoomModifier = new MouseWheelZoomModifier();
    mouseWheelZoomModifier.onDetach = () => console.log('mouseWheelZoomModifier removed!');
    mouseWheelZoomModifier.onAttach = () => console.log('mouseWheelZoomModifier attached');
    resScichartSurface.chartModifiers.add(mouseWheelZoomModifier);
  };

  const setZoomExtentsModifier = (resScichartSurface: SciChartSurface) => {
    const zoomExtentsModifier = new ZoomExtentsModifier();
    zoomExtentsModifier.onDetach = () => console.log('zoomExtentsModifier removed!');
    zoomExtentsModifier.onAttach = () => console.log('zoomExtentsModifier attached');
    resScichartSurface.chartModifiers.add(zoomExtentsModifier);
  };

  const onHandleScichartLegend = () => {
    if (sciChartLegend) {
      sciChartLegend.sciChartLegend.showLegend = !showLegendValue;
      setShowLegendValue(!showLegendValue);
    }
  };

  useEffect(() => {
    (async () => {
      const res = await draw(divElement, orientation, {});
      setSciChartSurface(res.sciChartSurface);
      setWasmContext(res.wasmContext);
      addLineDataSeries(res.sciChartSurface, res.wasmContext);
      setLegendModifier(res.sciChartSurface);
      setZoomPanModifier(res.sciChartSurface);
      setMouseWheelZoomModifier(res.sciChartSurface);
      setZoomExtentsModifier(res.sciChartSurface);
      setTooltip(res.sciChartSurface);
      setChartReady(true);
    })();

    return () => {
      sciChartSurface?.delete();
      setSciChartSurface(undefined);
    };
  }, []);

  return (
    <>
      <div
        id={divElement}
        style={{
          position: 'relative',
          width: '100%',
          overflow: 'auto',
        }}
      />
      <button onClick={onHandleScichartLegend}>Show/hide Legend</button>
    </>
  );
};

export default Scichart;

A couple of things that I've noticed working on it:

• It seems for RolloverModifier has an issue when I'm using attach and detach function on the setTooltip function

      tooltipModifier.onDetach = () => console.log('tooltip rolloverModifier removed!');
      tooltipModifier.onAttach = () => console.log('tooltip rolloverModifier attached');

Also, if you remove those lines you will get the same issue that I've been reported on:

• Finally, I'm working on a graph that could change due to some inputs like downsampling or range of dates, and when the data is updated and I want to hide/show the legend is doubled and the new one is overlaying the previous one in the same charting.

If you need something more, please don't hesitate to ask me

Regards

scichart version 1.2.1451

[klishevich]

Hi @hecto932 thank you for the code example it helped me to reproduce the bug. The problem was that CursorModifier and RolloverModifier had a problem working with RenderableSeries having empty DataSeries. Exactly as it was in your example. The error happened in HitTestProvider for empty DataSeries. The bug was fixed in version 1.2.1452. Now if DataSeries is empty for some RenderableSeries the CursorModifier and RolloverModifier ignores this series

[hecto932]

Thank you so much, guys. The issue was successfully fixed!

I'm going to open another issue related to the doubled legend on the chart.