We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Overview

The JavaScript Sunburst chart control is a data visualization tool, which provides an effective way to visualize hierarchical data. The Sunburst chart looks similar to multiple doughnut charts, where the center circle represents the root level of hierarchy, with outer circles representing higher levels of hierarchy.


Levels

Render any number of child items for each individual segment in the Sunburst chart, and these segments are categorized to form levels.

JavaScript Sunburst Chart with levels.


Data Labels

Data labels in the JavaScript Sunburst chart control are used to display more information about a particular segment. Labels can be trimmed, or hidden if the label width exceeds the item bounds.

JavaScript Sunburst Chart with data label.


Appearance customization

Customize the appearance of each element in the Sunburst chart to the desired style.

JavaScript Sunburst Chart with custom angle.

Angle customization

Form half or quarter circle by modifying the start and end angles of the Sunburst chart. This allows the sunburst to render in a very small area.

JavaScript Sunburst Chart with custom radius.

Radius customization

Fit the Sunburst chart in the available space, by changing the radius of both outer and inner circles.


Legend

The legends in JavaScript Sunburst chart control provide additional information helpful in identifying the root nodes. Toggle segment visibility or highlight the segment by clicking a legend item.

JavaScript Sunburst Chart with legend position.

Legend Position

Position the legend to the top, bottom, left, or right of the Sunburst chart.

JavaScript Sunburst Chart with legend shape.

Legend item shape

Change the legend item shape to circle, rectangle, or other built-in custom shapes to indicate the segments.


Zooming

The JavaScript Sunburst chart control provides support to drill parent items to have a more detailed look at their child items.

JavaScript Sunburst Chart with zooming.


Tooltip

Displays details about the segment value through a tooltip by hovering the mouse over the segment. Use any HTML element as a tooltip.

JavaScript Sunburst Chart with tooltip.


Selection and highlight

Select a particular segment on mouse click and highlight on mouse hover to bring the center of attraction over other segments on the Sunburst chart.

JavaScript Sunburst Chart with selection.


Animation

The JavaScript Sunburst chart control provides a visually appealing way to view its segments with animated transitions for a certain duration. Experience smooth rendering on segments of drill-down also.

JavaScript Sunburst Chart with animation.


Touch and responsive support

The interactive Sunburst chart control also supports touch interactions.

Touch illustration

Touch support

All the Sunburst chart features will work on touch devices with zero configuration. Use the touch features such as tooltip and track line without any customization.

Responsive illustration

Responsive

You can view the JavaScript Sunburst chart control on various devices. You can also, hide specific elements in the sunburst for particular screen sizes by making minimal change in the events.

Cross-browser illustration

Cross-browser support

You can render the Sunburst chart control in all the modern browsers.


70+ JAVASCRIPT UI CONTROLS

Integrates with Top Frameworks

Built-in integration with the most popular third-party frameworks, like Angular 2+, and React.

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon