remove pan button from code

[Elbit12]

Hi,
sometimes I need to remove the pan button and sometime not,
how can I do it from code and not from CSS?
because I want it to be change by configuration/ by some condition

Thanks

[Indranil]

@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.

___________
Indranil Deo
Team CanvasJS

[Elbit12]

Great, Thank you :)

[Elbit12]

Ive checked it with angular but its not working for me,
even if I set it like below:

 <div class="chart" [ngStyle]="{'height':chartSize+'px'}" style="width: 100%;" [ngClass]="{'hide-pan': true}"></div>

it works only if its under global style.scss
do you have an idea how to solve it or how to add the condition to the global scss?

Thank you

[Elbit12]

I solve it by add the class to global css (style.scss)
and add condition as ngClass in the component
but I still wonder why it not work if css is in component and not in global

[Indranil]

@elbit12,

Can you kindly create a sample project reproducing the issue you are facing when CSS is declared in component and share it with us over Google-Drive or Onedrive so that we can run the sample locally at our end to understand the scenario better and help you out?

___________
Indranil Deo
Team CanvasJS