How to custom Tooltip/Legend on Scichart?

Hi Support Team.

I’m working on SciChart with React 16.9 . Licensed by EOG Resouces.

Can you guys please let me know how to custom tooltip/legend on SciChart (JS)?

My custom function is below. Thank all

export async function initSciChart(
  chartDiv: string,
  chartData: Array<{ x: Array<number>; y: Array<number> }>,
  handleMouseMove?: (args: ModifierMouseArgs) => void,
) {
  // Create the SciChartSurface in the div 'scichart-root'

  const theme = {
    ...new SciChartJSDarkv2Theme(),
    sciChartBackground: '#191F26',
  };

  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    chartDiv,
    { theme },
  );
  const legend = new LegendModifier({
    orientation: ELegendOrientation.Horizontal,
    // placementDivId: 'legend-div-id',
    showSeriesMarkers: true,
    showLegend: false,

    showCheckboxes: false,
    isCheckedChangedCallback: (series, isChecked) => {
      // isChecked callback only works if showCheckboxes=true
      console.log(
        `Option 1: Legend item ${series.type} isChecked=${isChecked}`,
      );
    },
  });

  sciChartSurface.chartModifiers.add(
    // new ZoomPanModifier(),
    new RolloverModifier({ placementDivId: 'legend-div-id' }), // enable tooltip
    new RubberBandXyZoomModifier(),
    new MouseWheelZoomModifier(),
    new ZoomExtentsModifier(),
    new XAxisDragModifier(),
    new YAxisDragModifier(),
    legend,
    new CursorModifier({
      //placementDivId: 'legend-div-id',
      //tooltipDataTemplate: customTemplate,
      //tooltipLegendTemplate: getTooltipLegendTemplate,
      // tooltipSvgTemplate: tooltipSvgTemplate,
    }), // enable cursor - yValue and xValue
  );

  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, {
      drawMajorGridLines: false,
      drawMinorGridLines: false,
      drawMajorBands: false,
      visibleRangeLimit: new NumberRange(
        Math.min(...chartData[0].x),
        Math.max(...chartData[0].x),
      ),
    }),
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      drawMajorGridLines: false,
      drawMinorGridLines: false,
      drawMajorBands: false,

      zoomExtentsToInitialRange: false,
      autoRange: EAutoRange.Always,
    }),
  );

  chartData.forEach((seriesData, index) => {
    const lineSeries = new FastLineRenderableSeries(wasmContext, {
      stroke: AUTO_COLOR,

      strokeThickness: index % 2 === 0 ? 3 : 1,
      dataSeries: new XyDataSeries(wasmContext, {
        xValues: seriesData.x,
        yValues: seriesData.y,
        dataSeriesName: `series-${index}`,
      }),
    });

    lineSeries.rolloverModifierProps.tooltipLegendTemplate = (
      tooltipProps: RolloverModifierRenderableSeriesProps,
      seriesInfo: SeriesInfo,
    ) => {
      return `<svg width="340" height="25">
          <rect width="100%" height="100%" fill="#000000DD" stroke="grey" stroke-width="2" />
          <svg width="100%">
              <text x="8" y="16" font-size="13" font-family="Verdana" fill="red">Custom Legend Tooltip</text>
              <text x="180" y="16" font-size="13" font-family="Verdana" fill="lightblue">X: ${seriesInfo.formattedXValue}</text>
              <text x="260" y="16" font-size="13" font-family="Verdana" fill="green">Y: ${seriesInfo.formattedYValue}</text>
          </svg>
      </svg>`;
    };

    sciChartSurface.renderableSeries.add(lineSeries);

    //Custom event on chart
    if (sciChartSurface && handleMouseMove) {
      const customModifider = new FacilityBalanceChartModifier();
      sciChartSurface.chartModifiers.add(customModifider);
      customModifider.modifierMouseMove = handleMouseMove;
    }
  });
  return { sciChartSurface, wasmContext };
}