Chart ToolBar

[Sefa Dogan]

Hello, I want the toolbar on the top right of the chart I use to be constantly visible. I couldn't find the setting for this. How can I do it?

[Durga Gopalakrishnan]

Hi Sefa,

Greetings from Syncfusion.

Please confirm us whether you are using Essential JS 1 or Essential JS 2. EJ1 has category as jQuery and control name as ejChart. EJ2 has category as JavaScript and control name as Chart. As per your created ticket/forum, you have specified control as ejChart and category as jQuery, but code snippet seems to be in EJ2.

If you are working in EJ1, as of now, we don’t have support to display the zooming toolbar at initial rendering. It will be displayed while performing zooming. If you are using EJ2, we have the property showToolbar to display zoomkit toolbar at initial rendering itself. Please check with the below documentation and online demo link.

zoomSettings:

{

    enableSelectionZooming: true,

    showToolbar: true,

    //Toolbar items for zooming toolkit

    toolbarItems: ['Zoom', 'Pan', 'Reset']

}

Demo : https://ej2.syncfusion.com/demos/#/material3/chart/zooming.html

UG : https://ej2.syncfusion.com/documentation/chart/zooming#toolbar

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Sefa Dogan]

Hi Durga,

I'm using ej2 and I'm already using the code block you suggested, but I can't make the toolbar visible all the time, it doesn't have any effect.

[Theveshwar Jayakumar]

Sefa,

Thanks for the update. We have prepared sample with showToolbar property as true. Zooming toolbar is displayed at initial rendering itself. We have attached the tested sample for your reference. Please check with the below screenshot and sample.

let chart: Chart = new Chart({

        zoomSettings:

        {

            showToolbar: true

        }

});

Screenshot :

Sample : https://stackblitz.com/edit/eqfyhd

Since we are unable to replicate the reported case from our end, we request you to share the following information which will be helpful for further analysis and provide the solution sooner.

• Try to reproduce the reported scenario in above sample.
• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.
• Share your datasource file.
• Share your package version.

Please let us know if you have any concerns.