API

Charts

General Components

Cartesian Components

Polar Components

Shapes

SunburstChart

The sunburst is a hierarchical chart, similar to a Treemap, plotted in polar coordinates. Sunburst charts effectively convey the hierarchical relationships and proportions within each level. It is easy to see all the middle layers in the hierarchy, which might get lost in other visualizations. For some datasets, the radial layout may be more visually appealing and intuitive than a traditional Treemap.

Parent Components

SunburstChart consumes context provided by these components:

Child Components

SunburstChart provides context for these components:

Props

  • dataSunburstData

    The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.

    Use the dataKey prop to specify which properties to use.

    FORMAT: 

    data={[{ name: 'a', value: 12, fill: '#8884d8' }, { name: 'b', value: 5, fill: '#83a6ed' }]}

  • childrenReactNodeoptional

  • classNamestringoptional

  • cxnumberoptional

    The x-coordinate of center in pixels. If undefined, it will be set to half of the chart width.

  • cynumberoptional

    The y-coordinate of center in pixels. If undefined, it will be set to half of the chart height.

  • dataKeystringoptional

    Decides how to extract value from the data.

    DEFAULT: "value"

  • endAnglenumberoptional

    Angle, in degrees, at which the chart should end.

    DEFAULT: 360

  • fillstringoptional

    DEFAULT: "#333"

  • height`${number}%` | numberoptional

    The height of chart container. Can be a number or a percent string like "100%".

    Examples:

  • idstringoptional

  • innerRadiusnumberoptional

    The radius of the inner circle at the center of the chart.

    DEFAULT: 50

  • nameKeyFunction | number | stringoptional

    Name represents each sector in the tooltip. This allows you to extract the name from the data:

    • string: the name of the field in the data object;
    • number: the index of the field in the data;
    • function: a function that receives the data object and returns the name.

    DEFAULT: "name"

  • outerRadiusnumberoptional

    Outermost edge of the chart. Defaults to the max possible radius for a circle inscribed in the chart container

  • paddingnumberoptional

    Distance between sectors.

    DEFAULT: 2

  • responsivebooleanoptional

    If true, then it will listen to container size changes and adapt the SVG chart accordingly. If false, then it renders the chart at the specified width and height and will stay that way even if the container size changes.

    This is similar to ResponsiveContainer but without the need for an extra wrapper component. The responsive prop also uses standard CSS sizing rules, instead of custom resolution logic (like ResponsiveContainer does).

    DEFAULT: false

  • ringPaddingnumberoptional

    Padding between each hierarchical level.

    DEFAULT: 2

  • startAnglenumberoptional

    Angle in degrees from which the chart should start.

    DEFAULT: 0

  • strokestringoptional

    DEFAULT: "#FFF"

  • styleReact.CSSPropertiesoptional

  • textOptionsPropsoptional

    An object with svg text options to control the appearance of the chart labels.

    DEFAULT: {"fontWeight":"bold","paintOrder":"stroke fill","fontSize":".75rem","stroke":"#FFF","fill":"black","pointerEvents":"none"}

  • throttleDelay"raf" | numberoptional

    Decides the time interval to throttle events. Only events defined in throttledEvents prop are throttled. All other events are executed immediately/synchronously.

    Options:

    • number: the time interval in milliseconds
    • 'raf': use requestAnimationFrame to schedule updates.

    DEFAULT: "raf"

  • throttledEvents"all" | Array<keyof GlobalEventHandlersEventMap>optional

    Defines which events should be throttled. Events not in this list will not be throttled.

    Use the special value 'all' to throttle all events. Empty array means no events are throttled.

    Use the prop throttleDelay to define the throttling interval.

    If an event is on this list, then you lose the opportunity to access the event synchronously. Which means that if you want to call e.preventDefault() or e.stopPropagation() inside the event handler, then that event handler must not be in this list.

    DEFAULT: ["mousemove","touchmove","pointermove","scroll","wheel"]

  • width`${number}%` | numberoptional

    The width of chart container. Can be a number or a percent string like "100%".

    Examples:

  • onClickFunctionoptional

  • onMouseEnterFunctionoptional

  • onMouseLeaveFunctionoptional