Use custom buttons for zooming in CanvasJS

Question

I would like to use the zooming and panning feature of canvasjs, but with my own buttons (so that I can control their style, position,..). Is this possible?

Answer 1

Take a look at this!

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

var chart = new CanvasJS.Chart("chartContainer",
{
  title: {
   text: "Customized Zoom and Pan Buttons",
   horizontalAlign: "left"

  },
    zoomEnabled:true,
  data: [
  {
   type: "spline",
   dataPoints: dataPoints
  }
  ]
});
chart.render();

$('.canvasjs-chart-toolbar button:eq(0)').text('Pan').addClass('myButton').click(function() {
  if($(this).hasClass("clicked")) {
        $(this).text("Pan");
        $(this).removeClass("clicked");
    } else {
        $(this).text("Zoom");
        $(this).addClass("clicked");
    } 
 });
$('.canvasjs-chart-toolbar button:eq(1)').text('Restore').addClass('myButton').click(function() {
 $('.canvasjs-chart-toolbar button:eq(0)').text('Pan').removeClass("clicked");
});

.myButton {
 background-color:#599bb3;
 -moz-border-radius:28px;
 -webkit-border-radius:28px;
 border-radius:28px;
 border:1px solid #000 !important;
 cursor:pointer;
 color:#ffffff;
 font-family:Arial;
 font-size:17px;
 padding:6px 20px !important;
  margin-left: 3px !important;
 text-decoration:none;
 text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
 background-color:#476e9e;
}

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="chartContainer" style="height: 360px; width: 100%;"></div>