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();
- Arun Surendran asked 2 years ago
- last edited 2 years ago
-
Any update on this issue?
- You must login to post comments
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
- Michael Klishevich answered 2 years ago
- last edited 2 years ago
- You must login to post comments
CustomTooltip has been fixed in 2.0.2185 release
- Vladyslav Bykov answered 2 years ago
- You must login to post comments
Please login first to submit.