Floating tooltip
Tooltips and legends
A tooltip that positions itself next to the data point under the cursor.
Interactive example — scroll, zoom, and hover the chart.
Code
// Lightweight Charts™ Example: Floating Tooltip
// https://tradingview.github.io/lightweight-charts/examples/tooltips-and-legends/floating-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({
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: '#2962FF',
bottomColor: 'rgba(41, 98, 255, 0.28)',
lineColor: '#2962FF',
lineWidth: 2,
crosshairMarkerVisible: false,
});
series.priceScale().applyOptions({
scaleMargins: {
top: 0.3, // leave some space for the legend
bottom: 0.25,
},
});
series.setData([
{ time: '2018-10-19', value: 26.19 },
]);
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 = '#2962FF';
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: ${'#2962FF'}">Apple 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 coordinate = series.priceToCoordinate(price);
let shiftedCoordinate = param.point.x - 50;
if (coordinate === null) {
return;
}
shiftedCoordinate = Math.max(
0,
Math.min(container.clientWidth - toolTipWidth, shiftedCoordinate)
);
const coordinateY =
coordinate - toolTipHeight - toolTipMargin > 0
? coordinate - toolTipHeight - toolTipMargin
: Math.max(
0,
Math.min(
container.clientHeight - toolTipHeight - toolTipMargin,
coordinate + toolTipMargin
)
);
toolTip.style.left = shiftedCoordinate + 'px';
toolTip.style.top = coordinateY + '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
Lightweight Charts™ has no built-in tooltip. This one is an HTML element placed over the chart and updated as the cursor moves.
- A
divis created, styled, and added to the chart's container. It starts hidden. subscribeCrosshairMovecalls a handler whenever the crosshair moves. ItsMouseEventParamsgive the cursor'spoint, thetime, and the data of each series under the crosshair.- When the cursor is outside the chart or there is no data under it, the handler hides the tooltip. Otherwise it fills in the price and date and shows it.
priceToCoordinateturns the price into a vertical position, so the tooltip sits next to the data point rather than the cursor. These lines are highlighted in the code.
The crosshair's horizontal line, its labels, and the grid are hidden in the chart options, so the tooltip is the only readout.
Tips
- To place the tooltip next to the cursor instead, use
param.pointas is. See the tracking tooltip. pointer-events: noneon the tooltip keeps it from catching the mouse, so the chart under it still scrolls and zooms.
Resources
subscribeCrosshairMoveMouseEventParamspriceToCoordinate- Related examples: Tracking tooltip, Magnifier tooltip, Legend