Skip to content

Financial

Draggable price alerts

Alert lines the user can drag, firing once or repeatedly as price crosses them.

Draggable price alerts@ortex-charts/financial
Loading draggable price alerts…
Alert lines the user can drag, firing once or repeatedly as price crosses them.

What this example is for

Price alerts as lines the user drags, firing once or on every crossing, with the event handed to your application rather than handled for you. Reach for this when alerts belong to your product's notification system: the chart owns the interaction, you own what happens next, and the lines serialise with the rest of the layout.

alerts.ts
import { createFinancialChart, type AlertEvent } 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",
    watermark: { text: SYMBOL, visible: true, fontSize: 38 },
    seriesOptions: { title: SYMBOL },
    data: history,
});

const alerts = chart.alerts({ draggable: true });
alerts.add({ price: at(0.68), label: "Take profit", repeat: true });
alerts.add({ price: at(0.32), label: "Stop", color: "#EF4E5A", repeat: true });

// `triggered` fires as the last price crosses a line, `moved` when the user
// drags one. `alerts.list()` is plain JSON, so the host can store it.
alerts.subscribe((event: AlertEvent) => {
    if (event.type === "triggered") {
        crossings++;
        status(
            `${event.alert.label} crossed ${event.direction} at ${event.price.toFixed(2)} on ${new Date(event.time).toISOString().slice(0, 10)} — ${crossings} so far`,
        );
    } else if (event.type === "moved") {
        status(`${event.alert.label} moved from ${event.from.toFixed(2)} to ${event.alert.price.toFixed(2)}`);
    }
});

More financial examples