SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
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();
CustomTooltip has been fixed in 2.0.2185 release
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
Please login first to submit.