SciChart.js JavaScript 2D Charts API > ChartModifier API > Cursors and Tooltips > Cursor Modifier
Cursor Modifier

SciChart.js provides a cursors / crosshairs behavior via the CursorModifier, available out of the box.

Besides common features which are inherited from the ChartModifierBase class, the CursorModifier allows to show or hide a crosshairs, axis labels and an optional tooltip on the chart.

Adding a CursorModifier to a Chart

A CursorModifier can be added to the sciChartSurface.chartModifiers collection to enable crosshair/cursor behavior. For example:

Copy Code
// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);

// Add CursorModifier behavior
const cursorModifier = new CursorModifier({
    crosshairStroke: "#ff6600",
    crosshairStrokeThickness: 1,
    tooltipContainerBackground: "#000",
    tooltipTextStroke: "#ff6600",
    showTooltip: true,
    axisLabelFill: "#b36200",
    axisLabelStroke: "#fff"

This results in the following behavior:

Customizing the Cursor/Tooltip Appearance

Basic customisation of the cursor and tooltip appearance can be made through the following properties.

CursorModifier Customisation
Copy Code
export class CursorModifier extends ChartModifierBase2D {
     * Gets or sets the crosshair line Stroke color as an HTML Color code
    public crosshairStroke = "#228B22";
     * Gets or sets the crosshair line strokethickness
    public crosshairStrokeThickness: number = 2;
     * Gets or sets the tooltip container background color as an HTML Color code
    public tooltipContainerBackground: string = "#228B22";
     * Gets or sets the tooltip text color as an HTML Color code
    public tooltipTextStroke: string = "#fff";
     * Gets or sets whether we should display the tooltip. Default is false
    public showTooltip: boolean = false;
     * Gets or sets whether we should display axis labels. Default is true
    public showAxisLabels: boolean = true;
     * Gets or sets the axis label text color as an HTML Color code
    public axisLabelStroke: string = "#fff";
     * Gets or sets the axis label fill as an HTML Color code.
    public axisLabelFill: string = "#228B22";

For example,

Customising the Tooltip

The Tooltip Content can be customised in the CursorModifier. There are two levels of this.  You can customise just the content for the tooltip, or you can supply your own svg to customise the appearance as well.

To customise the content, create a tooltipDataTemplate.  This is a function which takes an array of seriesInfo (which are the results of the hit-test) and returns an array of strings which are the lines that will appear in the tooltip.

Tooltip Content
Copy Code
const customTemplate: TCursorTooltipDataTemplate = (seriesInfos: SeriesInfo[], tooltipTitle: string) => {
        const valuesWithLabels: string[] = [];
        if (tooltipTitle) {
        seriesInfos.forEach((si, index) => {
            const xySeriesInfo = si as XySeriesInfo;
            valuesWithLabels.push(`X Value: ${xySeriesInfo.formattedXValue}`);
            valuesWithLabels.push(`Y Value: ${xySeriesInfo.formattedYValue}`);
        return valuesWithLabels;
sciChartSurface.chartModifiers.add(new CursorModifier({ showTooltip: true, tooltipDataTemplate: customTemplate });

The tooltipSvgTemplate property allows you to take complete control over the appearance and content of your tooltip.  If you do this, be aware that the default template includes some logic to measure and reposition the tooltip when you are close to the bottom right of the chart.  To retain this behaviour, call adjustTooltipPosition as shown in the example below. 

Tooltip Appearance
Copy Code
    const tooltipSvgTemplate: TCursorTooltipSvgTemplate = (
        seriesInfos: SeriesInfo[],
        svgAnnotation: CursorTooltipSvgAnnotation
    ): string => {
        const width = 120;
        const height = 120;
        const seriesInfo = seriesInfos[0];
        if (!seriesInfo?.isWithinDataBounds) {
            return "<svg></svg>";
        const x = seriesInfo ? seriesInfo.formattedXValue : "";
        const y = seriesInfo ? seriesInfo.formattedYValue : "";
         // this calculates and sets svgAnnotation.xCoordShift and svgAnnotation.yCoordShift.  Do not set x1 or y1 at this point.
        adjustTooltipPosition(width, height, svgAnnotation);
        return `<svg width="${width}" height="${height}">
            <circle cx="50%" cy="50%" r="50%" fill="green"/>
            <svg width="100%">
                <text y="40" font-size="13" font-family="Verdana" dy="0" fill="white">
                    <tspan x="50%" text-anchor="middle" dy="1.2em">Some Title</tspan>
                    <tspan x="50%" text-anchor="middle" dy="1.2em">x: ${x} y: ${y}</tspan>
                <image x="50%" y="10" width="25" height="25" transform="translate(-12.5,0)" xlink:href="/img/posture.png" />

Getting tooltips for the nearest point only

By default, CursorModifier returns data for all series at the x-value the mouse is over, regardless of y-value.  If you want to only see information for the points that are near the cursor in both x and y, then set the hitTestRadius property to a non-zero value, either on the modifier instance, or in the constructor options.  This will cause it to report only on points that number of pixels away from the cursor.

See Also