Tooltips

import VersionWarningAdmonition from "@site/src/components/VersionWarningAdmonition";

{/* Show warning when not on the latest published version Tutorials section isn't versioned yet, hence the need for the warning message THESE TUTORIALS NEED TO BE UPDATED FOR VERSION 4 */}

<VersionWarningAdmonition notCurrent="This example is for the latest published version of Lightweight Charts." type="caution" displayVersionMessage />

Lightweight Charts™ doesn't include a built-in tooltip feature, however it is something which can be added to your chart by following the examples presented below.

How to

In order to add a tooltip to the chart we need to create and position an html into the desired position above the chart. We can then subscribe to the crosshairMove events (subscribeCrosshairMove) provided by the IChartApi instance, and manually update the content within our html tooltip element and change it's position.

chart.subscribeCrosshairMove(param => {
    if (
        param.point === undefined ||
		!param.time ||
		param.point.x < 0 ||
		param.point.y < 0
    ) {
        toolTip.style.display = 'none';
    } else {
        const dateStr = dateToString(param.time);
        toolTip.style.display = 'block';
        const data = param.seriesData.get(series);
        const price = data.value !== undefined ? data.value : data.close;
        toolTip.innerHTML = `<div>${price.toFixed(2)}</div>`;

        // Position tooltip according to mouse cursor position
        toolTip.style.left = param.point.x + 'px';
        toolTip.style.top = param.point.y + 'px';
    }
});

The process of creating the tooltip html element and positioning can be seen within the examples below. Essentially, we create a new div element within the container div (holding the chart) and then position and style it using css.

You can see full working examples below.

Getting the mouse cursors position

The parameter object (MouseEventParams Interface) passed to the crosshairMove handler function (MouseEventhandler) contains a point property which gives the current mouse cursor position relative to the top left corner of the chart.

Getting the data points position

It is possible to convert a price value into it's current vertical position on the chart by using the priceToCoordinate method on the series' instance. This along with the param.point.x can be used to determine the position of the data point.

chart.subscribeCrosshairMove(param => {
    const x = param.point.x;
    const data = param.seriesData.get(series);
    const price = data.value !== undefined ? data.value : data.close;
    const y = series.priceToCoordinate(price);
    console.log(`The data point is at position: ${x}, ${y}`);
});

Resources

• subscribeCrosshairMove
• MouseEventParams Interface
• MouseEventhandler
• priceToCoordinate

Below are a few external resources related to creating and styling html elements:

• createElement
• innerHTML
• style property

Examples

import UsageGuidePartial from "../_usage-guide-partial.mdx";

import CodeBlock from "@theme/CodeBlock";

Floating Tooltip

The floating tooltip in this example will position itself next to the current datapoint.

import floatingCode from "!!raw-loader!./tooltip-floating.js";

Tracking Tooltip

The tracking tooltip will position itself next to the user's cursor.

import trackingCode from "!!raw-loader!./tooltip-tracking.js";

Magnifier Tooltip

The magnifier tooltip will position itself along the top edge of the chart while following the user's cursor along the horizontal time axis.

import magnifierCode from "!!raw-loader!./tooltip-magnifier.js";