Adding a custom button in toolbar or beside the tool bar zoom/span.

[aizaz]

Hi,Is it possible to add a custom button to the CanvasJS chart toolbar (like next to the existing Zoom or Reset buttons) to trigger our own functionality — for example, auto-scaling the chart’s Y-axis?

[Vishwas R]

@aizaz,

You can add a custom button to the CanvasJS toolbar using DOM manipulation (e.g., append a button to .canvasjs-chart-toolbar). After chart.render(), you can create a button element, style it to match the toolbar and append it. Ensure the chart is rendered first, as the toolbar won’t exist otherwise. Please find the code-snippet below.

var toolbar = document.getElementsByClassName("canvasjs-chart-toolbar")[0];
var button = document.createElement("button");
toolbar.appendChild(button);

Please take a look at this JSFiddle for a working example.

—
Vishwas R
Team CanvasJS