Short interest on the chart

import { createFinancialChart } from "@ortex-charts/financial";

const chart = createFinancialChart(el, {
    theme,
    timeZone: TIME_ZONE,
    resolution: "1D",
    volume: false,
    watermark: { text: SYMBOL, visible: true, fontSize: 40 },
    data: bars,
});

// A pane of its own, a quarter of the height, with its own scale.
const siPane = chart.chart.addPane({ heightRatio: 0.22 });
chart.chart
    .addSeries("area", {
        pane: siPane.id,
        title: "Estimated Short Interest, % of free float",
        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);

chart.chart.subscribeCrosshairMove((e) => {
    if (e.index === null) return status("");
    const parts: string[] = [];
    for (const [id, v] of e.seriesValues) {
        const series = chart.chart.getSeries(id);
        const value = "close" in v ? v.close : v.value;
        if (series && Number.isFinite(value)) parts.push(`${series.options.title}: ${value.toFixed(2)}`);
    }
    status(parts.join("   "));
});