CanvasJS Chart - Add Custom Button to Toolbar

by Vishwas .R

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints = [];
for (var i = 0; i < 100; i++) {
  dataPoints.push({ x: i, y: Math.random() * 100 });
}

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
  zoomEnabled: true,
  title: { text: "Chart with Custom Toolbar Button" },
  axisY: {
    title: "Y Value",
    minimum: 0,
    maximum: 100
  },
  data: [{
    type: "line",
    dataPoints: dataPoints
  }]
});
chart.render();
addCustomToolbarButton(chart);

function addCustomToolbarButton(chart) {
  var toolbar = document.getElementsByClassName("canvasjs-chart-toolbar")[0];
  var button = document.createElement("button");
  button.style.padding = "5px 12px";
  button.style.border = chart.toolbar.buttonBorderThickness + "px solid " + chart.toolbar.buttonBorderColor;
  button.style.backgroundColor = chart.toolbar.itemBackgroundColor;
  button.style.cursor = "pointer";
  button.style.width = "40px";
  button.style.height = "25px";
  button.style.boxSizing = "border-box";

  var img = document.createElement("img");
  img.src = "https://i.ibb.co/4wWDshhf/setting.png";
  img.style.width = "95%";

  button.appendChild(img);
  toolbar.appendChild(button);

  button.addEventListener("mousemove", function() {
    button.style.backgroundColor = chart.toolbar.itemBackgroundColorOnHover;
    img.style.filter = "invert(100%)";
  });

  button.addEventListener("mouseout", function() {
    button.style.backgroundColor = chart.toolbar.itemBackgroundColor;
    img.style.filter = "none";
  });

  button.addEventListener("click", function () {
    var yValues = dataPoints.map(function (point) { return point.y; });
    var minY = Math.min.apply(null, yValues);
    var maxY = Math.max.apply(null, yValues);
    var padding = (maxY - minY) * 0.1;

    chart.options.axisY.minimum = minY - padding;
    chart.options.axisY.maximum = maxY + padding;
    chart.render();
  });
}