Zooming in EJ 1 Angular SunburstChart

24 Jul 2018 / 1 minute to read

Sunburst chart provides zooming (drill down) experience with animation for both mouse and touch enabled devices. It allows you to virtualizing large sets of data into minimum data view.The zooming is achieved by using the property of zoomSettings

The following code shows how to initialize the zooming.

  • js
    • <ej-sunburstchart  id="sunburst"   [zoomSettings.enable]="true" >
</ej-sunburstchart>

    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 zoomSettings.toolbarHorizontalAlignment and zoomSettings.toolbarVerticalAlignment property.

  • js
    • <ej-sunburstchart  id="sunburst"  [zoomSettings.enable]="true" zoomSettings.toolbarHorizontalAlignment="left">
</ej-sunburstchart>

    Zooming_img2

    Click here to view the Zooming sample of the Sunburst Chart.