Skip to content

Customization

A readout that follows the cursor

Price, short interest and days to cover on three scales, with the value beside the cursor for the line it is on.

A readout that follows the cursor@ortex-charts/financial
Loading a readout that follows the cursor…
Price, short interest and days to cover on three scales, with the value beside the cursor for the line it is on.

What this example is for

Three series on three scales, and a tooltip that reads only the one under the pointer. The text is a template the host writes, so the same chart can say a price, a price and a day change, or a change against last week, without a line of rendering code. Reach for this on any page dense enough that a legend of a dozen values has stopped answering the question the reader is asking by pointing.

hover-readout.ts
import { createFinancialChart } from "@ortex-charts/financial";

const chart = createFinancialChart(el, {
    theme,
    timeZone: TIME_ZONE,
    resolution: "1D",
    volume: false,
    data: bars,
    seriesOptions: { title: SYMBOL },
    watermark: { text: SYMBOL, visible: true, fontSize: 40 },
    // One row, for the line under the pointer. `%` is a change against the
    // value that many bars back, which on a daily chart is yesterday and
    // last week.
    tooltip: {
        mode: "hovered",
        // The newline puts the changes on a quieter second line, under the
        // value the reader came for.
        template: "{name}  {value}\n1d {value % value[-1]}   1w {value % value[-7]}",
    },
});

const siPane = chart.chart.addPane({ heightRatio: 0.22 });
chart.chart
    .addSeries("area", {
        pane: siPane.id,
        title: "Estimated Short Interest",
        color: "#7C5CE6",
        priceFormat: { type: "percent", precision: 2 },
    })
    .setData(siPoints);

const dtcPane = chart.chart.addPane({ heightRatio: 0.18 });
chart.chart.addSeries("line", { pane: dtcPane.id, title: "Days to Cover", color: "#F5A524", lineWidth: 1.5 }).setData(dtcPoints);

More customization examples