Skip to content

Customization

Your buttons, your toolbar

Hide the built-in buttons you do not want and add your own, with icons, menus and keyboard access.

Your buttons, your toolbar@ortex-charts/ui
Loading your buttons, your toolbar…
Hide the built-in buttons you do not want and add your own, with icons, menus and keyboard access.

What this example is for

The toolbar is a list of switches plus your own actions. Hide what you do not want, add buttons and menus of your own with icons and keyboard access, and keep the result accessible. Reach for this when the chart sits inside an application that already has its own conventions and the default furniture is close but not yours.

custom-toolbar.ts
import { createChartShell, type ToolbarAction } from "@ortex-charts/ui";

const actions: ToolbarAction[] = [
    {
        id: "watchlist",
        icon: WATCHLIST_ICON, // A built-in name such as "share" works here too.
        label: "Watch",
        title: "Add this symbol to your watchlist",
        placement: "end",
        onClick: (shell) => status(`Host action: added ${shell.symbol()} to the watchlist.`),
    },
    {
        id: "export",
        icon: "api",
        label: "API",
        title: "Get this data from your API",
        placement: "end",
        menu: [
            {
                label: "Copy the request URL",
                icon: "link",
                hint: "REST",
                onSelect: (shell) => status(`Host action: copied /v1/${shell.symbol()}/ohlcv?resolution=${shell.resolution()}`),
            },
            {
                label: "Copy the visible bars as CSV",
                icon: "download",
                onSelect: (shell) => {
                    const csv = shell.exportCsv();
                    void navigator.clipboard?.writeText(csv).catch(() => undefined);
                    status(`Host action: ${csv.split("\n").length - 1} rows of CSV on the clipboard.`);
                },
            },
        ],
    },
];

const shell = createChartShell(el, {
    theme,
    timeZone: TIME_ZONE,
    symbol: SYMBOL,
    resolution: "1D",
    data: bars,
    watermark: { text: SYMBOL, visible: true },
    seriesOptions: { title: SYMBOL },
    // Off by name. Everything not listed keeps its default.
    toolbar: { symbol: false, resolution: false, theme: false, replay: false, overlays: false },
    actions,
});

More customization examples