Tracking tooltip
Tooltips and legends
A tooltip that follows the cursor.
Interactive example — scroll, zoom, and hover the chart.
Code
// Lightweight Charts™ Example: Tracking Tooltip
// https://tradingview.github.io/lightweight-charts/examples/tooltips-and-legends/tracking-tooltip
const chartOptions = {
layout: {
textColor: 'black',
background: { type: 'solid', color: 'white' },
},
};
/** @type {import('lightweight-charts').IChartApi} */
const chart = createChart(document.getElementById('container'), chartOptions);
chart.applyOptions({
rightPriceScale: {
scaleMargins: {
top: 0.3, // leave some space for the legend
bottom: 0.25,
},
},
crosshair: {
// hide the horizontal crosshair line
horzLine: {
visible: false,
labelVisible: false,
},
// hide the vertical crosshair label
vertLine: {
labelVisible: false,
},
},
// hide the grid lines
grid: {
vertLines: {
visible: false,
},
horzLines: {
visible: false,
},
},
});
const series = chart.addSeries(AreaSeries, {
topColor: 'rgba( 38, 166, 154, 0.28)',
bottomColor: 'rgba( 38, 166, 154, 0.05)',
lineColor: 'rgba( 38, 166, 154, 1)',
lineWidth: 2,
crosshairMarkerVisible: false,
});
series.setData([
{ time: '2016-07-18', value: 98.66 },
]);
const container = document.getElementById('container');
const toolTipWidth = 80;
const toolTipHeight = 80;
const toolTipMargin = 15;
// Create and style the tooltip html element
const toolTip = document.createElement('div');
toolTip.style = `width: 96px; height: 80px; position: absolute; display: none; padding: 8px; box-sizing: border-box; font-size: 12px; text-align: left; z-index: 1000; top: 12px; left: 12px; pointer-events: none; border: 1px solid; border-radius: 2px;font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`;
toolTip.style.background = 'white';
toolTip.style.color = 'black';
toolTip.style.borderColor = 'rgba( 38, 166, 154, 1)';
container.appendChild(toolTip);
// update tooltip
chart.subscribeCrosshairMove(param => {
if (
param.point === undefined ||
!param.time ||
param.point.x < 0 ||
param.point.x > container.clientWidth ||
param.point.y < 0 ||
param.point.y > container.clientHeight
) {
toolTip.style.display = 'none';
} else {
// time will be in the same format that we supplied to setData.
// thus it will be YYYY-MM-DD
const dateStr = param.time;
toolTip.style.display = 'block';
const data = param.seriesData.get(series);
const price = data.value !== undefined ? data.value : data.close;
toolTip.innerHTML = `<div style="color: ${'rgba( 38, 166, 154, 1)'}">ABC Inc.</div><div style="font-size: 24px; margin: 4px 0px; color: ${'black'}">
${Math.round(100 * price) / 100}
</div><div style="color: ${'black'}">
${dateStr}
</div>`;
const y = param.point.y;
let left = param.point.x + toolTipMargin;
if (left > container.clientWidth - toolTipWidth) {
left = param.point.x - toolTipMargin - toolTipWidth;
}
let top = y + toolTipMargin;
if (top > container.clientHeight - toolTipHeight) {
top = y - toolTipHeight - toolTipMargin;
}
toolTip.style.left = left + 'px';
toolTip.style.top = top + 'px';
}
});
chart.timeScale().fitContent();
The code expects the library’s exports, such as createChart, to be imported and a div with the id container on the page. Copy as HTML gives a page that runs on its own.
How it works
This tooltip follows the cursor. Like the floating tooltip, it is an HTML element over the chart, updated from a subscribeCrosshairMove handler.
- The handler hides the tooltip when the cursor is outside the chart or not over data. Otherwise it fills in the price and date.
- The tooltip is placed at
param.point, the cursor position, with a margin. Near the right or bottom edge it moves to the other side of the cursor, so it stays inside the chart.
These lines are highlighted in the code.
Resources
subscribeCrosshairMoveMouseEventParams- Related examples: Floating tooltip, Magnifier tooltip