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,
    axisLabelsFill: "#b36200",
    axisLabelsStroke: "#fff"
});
sciChartSurface.chartModifiers.add(cursorModifier);

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 axisLabelsStroke: string = "#fff";
    /**
     * Gets or sets the axis label fill as an HTML Color code.
     */
    public axisLabelsFill: string = "#228B22";
}

For example,

See Also