Pre loader

Custom Tooltip Not Working

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

0
0

Hi, Custom tooltip is not working on v2.0.2179.
Its working on v2.0.2146. Can you please check the issue..

import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { RangeSelectionChartModifier } from "./RangeSelectionChartModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { EXyDirection } from "scichart/types/XyDirection";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { EClipMode } from "scichart/Charting/Visuals/Axis/AxisBase2D";
import { MouseButtonZoomChartModifier } from "./MouseButtonZoomChartModifier";
import { SeriesInfo } from "scichart/Charting/Model/ChartData/SeriesInfo";
import { CursorTooltipSvgAnnotation } from "scichart/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation";
import { CursorModifier } from "scichart/Charting/ChartModifiers/CursorModifier";



async function initSciChart() {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");

      const xAxis = new NumericAxis(wasmContext);
      const yAxis = new NumericAxis(wasmContext);

      sciChartSurface.xAxes.add(xAxis);
      sciChartSurface.yAxes.add(yAxis);

      const xyData = new XyDataSeries(wasmContext);
      for (let i = 0; i < 250; i++) {
        xyData.append(i, Math.sin(i * 0.1));
      }
      sciChartSurface.renderableSeries.add(
        new FastLineRenderableSeries(wasmContext, { dataSeries: xyData })
      );

      const cursorModifier = new CursorModifier({
        crosshairStrokeThickness: 1,
        showTooltip: true,
        showAxisLabels: false,
        crosshairStroke: "transparent",
      });
      cursorModifier.tooltipSvgTemplate = (seriesInfo, svgAnnotation) => {
        let rowString = "";
        seriesInfo.forEach(() => {
          rowString = rowString + `<tspan x="8" dy="1.2em" fill="red">Test : 123</tspan>`;  
        });

        const string = `<svg width="300" height="33" x="0"><defs>
            <filter id="id_1610011455082" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"></feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
            </filter>
            </defs>
            <rect rx="4" ry="4" width="95%" height="90%" style="stroke-width:1;stroke:'#ffffff'}"></rect>
            <svg width="100%"><text x="8" y="3" font-size="13" font-family="Verdana" dy="0">`;

        svgAnnotation.xCoordShift = 5;
        svgAnnotation.yCoordShift = 5;
        return string + rowString + `</text></svg></svg>`;
      };
      sciChartSurface.chartModifiers.add(
        cursorModifier
      );


      const mouseWheelModifier = new MouseWheelZoomModifier();
      mouseWheelModifier.modifierMouseWheel = args => {
        const delta = args.mouseWheelDelta * 0.1;
        mouseWheelModifier.parentSurface.xAxes.asArray().forEach(x => {
          x.scroll(delta, EClipMode.None);
        });
      };
      sciChartSurface.chartModifiers.add(
        new RubberBandXyZoomModifier({ xyDirection: EXyDirection.XDirection })
      );
      sciChartSurface.chartModifiers.add(mouseWheelModifier);
      sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
  }

   initSciChart();
Version
v2.0.2179
  • You must to post comments
0
0

Hi Arun.

In fact, there was another bug which we just fixed. Please use scichart.js version 2.0.2186 containing the fix for CursorModifier tooltips which are working now.

Best regards,
Michael

Images
  • You must to post comments
0
0

CustomTooltip has been fixed in 2.0.2185 release

  • 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