Home Forums Chart Support remove pan button from code

remove pan button from code

Viewing 6 posts - 1 through 6 (of 6 total)
  • #33146

    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




    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() {

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

    Hide/unhide pan button programmatically

    Indranil Deo
    Team CanvasJS


    Great, Thank you :)


    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


    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



    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.