Zooming in WPF Sunburst Chart (SfSunburstChart)

17 Aug 20214 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: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