Change apeearance of the Chart scrollbar when zooming is enabled

[Alex]

Hello, I checked the docs and saw that a scrollbar can be shown when the chart is zoomed. 

I have two questions that I couldn't find an answer in the documentation:

1. Is there a way to disable/remove the "arrow" buttons that you can drag to change the zoom factor?
2. Is there a way to customize the appearance of the scrollbar? Change its height, background, remove the dots inside it etc. ?

[Durga Gopalakrishnan]

Hi Alex,

Greetings from Syncfusion.

We have analyzed your required queries. As of now, we don’t have direct property to customize the axis scrollbar. We request you to remove the required scrollbar elements from DOM using chart loaded event. Please check with the below snippet.

loaded:(args: ILoadedEventArgs)=>{

            var leftArrow = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_leftArrow_"]');

            for(var i = 0; i<leftArrow.length; i++)

                leftArrow[i].remove();

           

            var rightArrow = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_rightArrow_"]');

            for(var i = 0; i<rightArrow.length; i++)

                rightArrow[i].remove();

 

            var leftCircle = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_leftCircle_"]');

            for(var i = 0; i<leftCircle.length; i++)

                leftCircle[i].remove();

 

            var rightCircle = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_rightCircle_"]');

            for(var i = 0; i<rightCircle.length; i++)

                rightCircle[i].remove();

 

            var gripCircle = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_gripCircle_"]');

           for(var i = 0; i<gripCircle.length; i++)

                gripCircle[i].remove();

        }

Please let us know if you have any concerns.

Regards,

Durga G

[Kumaresan]

HI Team,

I am getting null in chart loaded event, refer below image

[Swetha Babu]

Kumaresan,

We suggest you to check whether the chart id and the Id that you use to get the chart element from the Dom is same. Please find the below code Snippet for your reference.

Code Snippet:

<ejs-chart id='container' (loaded)='load($event)' (zoomComplete)="changeZoom($event)">

</ejs-chart>

 

  public load(args: ILoadedEventArgs): void {

        this.modifyScrollbar();

    };

 

    public changeZoom(args: IZoomCompleteEventArgs): void {

        this.modifyScrollbar();

    };

 

    public modifyScrollbar() {

        var leftArrow = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_leftArrow_"]');

 

        for(var i = 0; i<leftArrow.length; i++)

 

            leftArrow[i].remove();

 

      

 

        var rightArrow = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_rightArrow_"]');

 

        for(var i = 0; i<rightArrow.length; i++)

 

            rightArrow[i].remove();

 

 

 

        var leftCircle = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_leftCircle_"]');

 

        for(var i = 0; i<leftCircle.length; i++)

 

            leftCircle[i].remove();

 

 

 

        var rightCircle = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_rightCircle_"]');

 

        for(var i = 0; i<rightCircle.length; i++)

 

            rightCircle[i].remove();

 

 

 

        var gripCircle = document.getElementById("container").querySelectorAll('[id*="container_scrollBar_gripCircle_"]');

 

       for(var i = 0; i<gripCircle.length; i++)

 

            gripCircle[i].remove();

    }

Kindly, revert us if you have any concerns.