Home Forums Chart Support remove pan button from code Reply To: remove pan button from code

#33240

@elbit12,

You can hide the pan button by setting display: none !important; for the specific HTML element(pan button) within a CSS class selector as shown below.

.hide-pan .canvasjs-chart-toolbar > button:first-child {
  display: none !important;
}

Then programmatically you can add or remove the CSS class to chartContainer, in turn, hiding/unhiding the pan button.

jQuery('#hideZoomPanButton').on('click', function() {
  if(jQuery('#chartContainer').hasClass('hide-pan'))
    jQuery('#chartContainer').removeClass('hide-pan');
  else
    jQuery('#chartContainer').addClass('hide-pan');
});

Please take a look at this JSFiddle for a complete working code.

Hide/unhide pan button programmatically

___________
Indranil Deo
Team CanvasJS