Your buttons, your toolbar

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 },
    // Off by name. Everything not listed keeps its default.
    toolbar: { symbol: false, resolution: false, theme: false, replay: false, overlays: false },
    actions,
});