Syncfusion AI Assistant

How can I help you?

Zooming in WPF Sunburst Chart (SfSunburstChart)

5 May 20262 minutes to read

Sunburst chart provides zooming (drill down) experience with animation for both mouse and touch enabled devices. It allows you to virtualize large sets of data into minimum data view.

The following code shows how to initialize the zooming behavior.

<sunburst:SfSunburstChart.Behaviors>
    <sunburst:SunburstZoomingBehavior/>
</sunburst:SfSunburstChart.Behaviors>
SunburstZoomingBehavior zoom = new SunburstZoomingBehavior();

chart.Behaviors.Add(zoom);

NOTE

You can enable or disable the zooming by using EnableZooming property. By default, EnableZooming property value is True.

Zooming_img1

Zooming Toolbar

By default, zooming toolbar will be enabled while zooming the segment; it contains both back and reset option.

You can align the zooming toolbar position by using ToolBarHorizontalAlignment and ToolBarVerticalAlignment property.

  • XAML
    • <sunburst:SfSunburstChart.Behaviors>
    <sunburst:SunburstZoomingBehavior 
        EnableZooming="True"
        ToolBarHorizontalAlignment="Center"
        ToolBarVerticalAlignment="Center">
    </sunburst:SunburstZoomingBehavior>
</sunburst:SfSunburstChart.Behaviors>

    You can customize the zooming toolbar using the following properties.

  • XAML
    • <sunburst:SfSunburstChart.Behaviors>
    <sunburst:SunburstZoomingBehavior 
        EnableZooming="True"
        ToolBarHorizontalAlignment="Center"
        ToolBarVerticalAlignment="Center"
        ToolBarItemHeight="30"
        ToolBarItemWidth="50"
        ToolBarItemMargin="5"/>
</sunburst:SfSunburstChart.Behaviors>

    Zooming_img2

    Toolbar position can also be moved using the ToolbarOffsetX and ToolbarOffsetY property. Offset values ranges from 0 to 1 from left to right for x position and top to bottom for y position.

  • XAML
    • <sunburst:SfSunburstChart.Behaviors>
    <sunburst:SunburstZoomingBehavior 
        EnableZooming="True" 
        ToolbarOffsetX="0.1" 
        ToolbarOffsetY="0.5"/>
</sunburst:SfSunburstChart.Behaviors>

    Zooming_img2