Add custom button to top toolbar

Add your own controls to the chart top bar with headerReady, createButton, and createDropdown.

Prerequisites

Chart created with createChart (or <GoCharting />)
Top bar visible (not fully excluded via exclude)

Wait for the header

Always await headerReady() before creating buttons. It resolves when the top bar is mounted (or immediately if the top bar is hidden).


const chart = GoChartingSDK.createChart("#chart", {
	datafeed: myDatafeed,
	symbol: "NASDAQ:AAPL",
	interval: "1D",
	licenseKey: "YOUR_LICENSE_KEY",
	onReady: async () => {
 await chart.headerReady();
 addToolbarControls(chart);
	},
});

Create a button

createButton returns a real HTMLButtonElement. Set label, tooltip, and click handler like any DOM button.


async function addToolbarControls(chart) {
	await chart.headerReady();
 
	const btn = chart.createButton({ align: "left" });
	btn.textContent = "Ping";
	btn.title = "Custom action";
	btn.addEventListener("click", () => {
 console.log("ping");
	});
}

Option	Type	Notes
`align`	`"left"` \| `"right"`	Placement in the top bar
`text`	`string`	Optional initial label
`title`	`string`	Tooltip
`onClick`	`() => void`	Optional click handler
`useCompactStyle`	`boolean`	Compact button chrome

createDropdown returns a promise with { applyOptions, remove }.


const dd = await chart.createDropdown({
	title: "TF",
	tooltip: "Quick timeframe",
	align: "right",
	items: [
 { title: "5m", onSelect: () => chart.setInterval("5m") },
 { title: "1h", onSelect: () => chart.setInterval("1h") },
 { title: "1D", onSelect: () => chart.setInterval("1D") },
	],
});
 
// Later:
dd.applyOptions({ title: "Interval" });
// dd.remove();

Confirm before an action

Pair a toolbar button with showConfirmDialog when the action is destructive or needs consent.


const clearBtn = chart.createButton({ align: "right", text: "Reset" });
clearBtn.addEventListener("click", async () => {
	const ok = await chart.showConfirmDialog({
 title: "Reset chart?",
 body: "This clears drawings on the active chart.",
	});
	if (!ok) return;
	// perform reset…
});

Remove a button


chart.removeButton(btn);

Full example


async function addToolbarControls(chart) {
	await chart.headerReady();
 
	const alertBtn = chart.createButton({
 align: "left",
 text: "Alert",
 title: "Create price alert",
	});
	alertBtn.addEventListener("click", () => {
 console.log("open alert UI");
	});
 
	await chart.createDropdown({
 title: "Theme",
 align: "right",
 items: [
 { title: "Light", onSelect: () => chart.setTheme("light") },
 { title: "Dark", onSelect: () => chart.setTheme("dark") },
 ],
	});
}

Chart API — headerReady, createButton, createDropdown, removeButton
Configuration — exclude and top-bar options