How Do I Add Plus And Minus To Zoom In And Out?

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.

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
 

Add Your icons

<div id='controls'>
  <span id='zingchart-zoom-in'>
     <i class="fa fa-search-plus" aria-hidden="true"></i>
  </span>
  <span id='zingchart-zoom-out'>
    <i class="fa fa-search-minus" aria-hidden="true"></i> 
  </span>
  <span id='zingchart-zoom-reset'>
    <i class="fa fa-refresh" aria-hidden="true"></i>
  </span>
</div>

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.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.