ZingChart: How do I make a custom zoom in and zoom out control?

We have an example using a built in toolbar-zoom module documented here. This module uses ZingChart shapes but you can easily just use html elements. The key thing is to bind API zoominand zoomout events to a click event listener to any element you want to represent a + or - with.

If you want to handle this on your own it is very simple. Start out by first finding some icons, I chose font awesome so include the following link tag.

Add Your icons

We must add the code to handle click events and use the Zingchart API zoom methods to update the chart

document.getElementById('zingchart-zoom-in').addEventListener('click', function(){
    zingchart.exec('myChart', 'zoomin');
});
document.getElementById('zingchart-zoom-out').addEventListener('click', function(){
    zingchart.exec('myChart', 'zoomout');
});
document.getElementById('zingchart-zoom-reset').addEventListener('click', function(){
    zingchart.exec('myChart', 'viewall');
});

Now add styling for some classic good looks

#controls {
  position:absolute;
  top:25px;
  left:30px;
  z-index:100;
}
#controls > span {
  display:inline-block;
  margin-left:10px;
  background-color:#01579B;
  color:#FFF;
  padding:5px 10px;
  margin-bottom:5px;
  border-radius:5px;
}
#controls > span:hover {
  cursor:pointer;
  background-color:#41B6C4;
}

You don't even have to use icons, you can use whatever styling you please.

Documentation

API methods