Skip to content

Your data

Short interest on the chart

ORTEX Estimated Short Interest and Days to Cover for IBM, plotted from a JSON feed on their own panes.

Short interest on the chart@ortex-charts/financial
Loading short interest on the chart…
ORTEX Estimated Short Interest and Days to Cover for IBM, plotted from a JSON feed on their own panes.

What this example is for

Estimated Short Interest and Days to Cover for IBM, drawn on their own panes from a JSON feed. Reach for this pattern whenever the data that matters is not price: any series your application already has can share the chart's timeline, its crosshair and its saved layout without becoming a price series.

short-interest.ts
import { createFinancialChart } from "@ortex-charts/financial";
import { SAMPLE_LOGO } from "@/lib/constants";

const chart = createFinancialChart(el, {
    legend: { logo: SAMPLE_LOGO }, // the company mark beside the symbol in the legend
    theme,
    timeZone: TIME_ZONE,
    resolution: "1D",
    volume: false,
    watermark: { text: SYMBOL, visible: true, fontSize: 40 },
    seriesOptions: { title: SYMBOL },
    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("   "));
});

More your data examples