How to show or hide Zooming Toolbar Items in UWP Chart?

The UWP Chart provides a convenient zooming toolbar with various actions like zoom in, zoom out, reset, and selection zooming. This article demonstrates how to control the visibility of individual toolbar items and the entire zooming toolbar using the ChartZoomPanBehavior.

Step 1: Configure the ChartZoomPanBehavior and enable selection zooming in SfChart using the following code snippet:

<chart:SfChart>
            <chart:SfChart.PrimaryAxis>
                <chart:DateTimeAxis LabelFormat="MMM, yyyy"/>
            </chart:SfChart.PrimaryAxis>
 
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis />
            </chart:SfChart.SecondaryAxis>
 
            <chart:SfChart.Behaviors>
                <chart:ChartZoomPanBehavior EnableSelectionZooming="True" />
            </chart:SfChart.Behaviors>
 
            <chart:FastLineSeries ItemsSource="{Binding Data}"
                                  XBindingPath="Date"
                                  YBindingPath="Load" />
</chart:SfChart>

Step 2: To display the zooming toolbar, set the EnableZoomingToolBar property of the ChartZoomPanBehavior to True.

<chart:SfChart>
            . . .
            <chart:SfChart.Behaviors>
                <chart:ChartZoomPanBehavior EnableZoomingToolBar="True" 
                                            EnableSelectionZooming="True" />
            </chart:SfChart.Behaviors>
            . . .
</chart:SfChart>

Step 3: To define the visibility of individual zooming toolbar items based on your preference, use the ToolBarItems property within the ChartZoomPanBehavior. You can specify a comma-separated list of the desired ZoomToolBarItems.

<chart:SfChart>
            . . .
            <chart:SfChart.Behaviors>
                <chart:ChartZoomPanBehavior EnableZoomingToolBar="True" 
                                            EnableSelectionZooming="True"
                                            ToolBarItems="ZoomIn,ZoomOut,SelectZooming" />
            </chart:SfChart.Behaviors>
            . . .
</chart:SfChart>

Output

Output image of an UWP Chart with zooming toolbar.

Refer to the GitHub sample to examine the full working implementation.

Conclusion

I hope you enjoyed learning about how to show or hide zooming toolbar items in UWP Chart.

You can refer to our UWP Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our UWP Chart’s documentation to understand how to present and manipulate data.

For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our UWP Charts and other UWP components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to show or hide Zooming Toolbar Items in UWP Chart?

Access denied