Sunburst Chart

A Sunburst Chart in REAVIZ is designed to display hierarchical data using concentric circles. The central circle represents the root node, with the hierarchy expanding outwards from this point. Each segment of the inner circle has a hierarchical connection to the segments of the outer circle that fall within the angular range of the parent segment.

Where to use:

Visualize Hierarchical Data: Ideal for displaying hierarchical relationships in a compact, radial format.
Show Category Relationships: Useful for showing the relationships between categories and subcategories.
Analyze Data Structure: Great for analyzing the structure and distribution of hierarchical data.

Quick Start

To create a sunburst chart, use import the SunburstChart and give it some data.

import { SunburstChart } from 'reaviz';


export default function App() {
  const heatmapSimpleData = [
  {
    key: "Discovery",
    data: [
      {
        key: "XML",
        data: 100,
      },
      {
        key: "JSON",
        data: 34,
      },
      {
        key: "HTTPS",
        data: 16,
      },
      {
        key: "SSH",
        data: 111,
      },
    ],
  },
  {
    key: "Threat Intelligence",
    data: [
      {
        key: "XML",
        data: 14,
      },
      {
        key: "JSON",
        data: 120,
      },
      {
        key: "HTTPS",
        data: 200,
      },
      {
        key: "SSH",
        data: 160,
      },
    ],
  }
];


  return (
    <SunburstChart
      height={400}
      width={400}
      data={heatmapSimpleData}
    />
  );
}

import { SunburstChart } from 'reaviz';

export default function App() {
  const heatmapSimpleData = [
  {
    key: "Discovery",
    data: [
      {
        key: "XML",
        data: 100,
      },
      {
        key: "JSON",
        data: 34,
      },
      {
        key: "HTTPS",
        data: 16,
      },
      {
        key: "SSH",
        data: 111,
      },
    ],
  },
  {
    key: "Threat Intelligence",
    data: [
      {
        key: "XML",
        data: 14,
      },
      {
        key: "JSON",
        data: 120,
      },
      {
        key: "HTTPS",
        data: 200,
      },
      {
        key: "SSH",
        data: 160,
      },
    ],
  }
];

  return (
    <SunburstChart
      height={400}
      width={400}
      data={heatmapSimpleData}
    />
  );
}

Examples

Simple

3-Level

API

SunburstChart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[] \| ChartNestedDataShape[]`	`[]`
`series`	The series component that renders the components. `ReactElement<SunburstSeriesProps, FC<Partial<SunburstSeriesProps>>>`	`<SunburstSeries />`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`	`0`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

SunburstSeries (opens in a new tab)

Prop	Description	Default
`id`	Id set by the parent. `string`
`data`	The internal data object built by d3 `any[]`
`animated`	Whether the chart is animated or not. `boolean`	`true`
`colorScheme`	Color scheme for the chart. `ColorSchemeType`	`cybertron`
`radius`	Radius of the chart. Set internally by `SunburstChart`. `number`
`arc`	The arc component to render. `ReactElement<SunburstArcProps, FC<Partial<SunburstArcProps>>>`	`<SunburstArc />`
`label`	The arc label component to render. `ReactElement<SunburstArcLabelProps, FC<Partial<SunburstArcLabelProps>>>`	`<SunburstArcLabel />`

SunburstArc (opens in a new tab)

Prop	Description	Default
`id`	Id set by the parent. `string`
`radius`	Radius of the chart. Set internally by `SunburstChart`. `number`
`data`	The internal data object built by d3 `any`
`fill`	Fill color for the arc. `string`
`animated`	Whether the chart is animated or not. `boolean`
`cursor`	Cursor for the element. `string`	`pointer`
`tooltip`	Tooltip element. `ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>`	`<ChartTooltip />`
`gradient`	Gradient shades for the bar. `ReactElement<GradientProps, FC<Partial<GradientProps>>>`
`onClick`	The onClick handler for the arc. `(event: MouseEvent<Element, MouseEvent>, data: any) => void`
`onMouseEnter`	Event for when the arc has mouse enter. `(event: any, data: any) => void`
`onMouseLeave`	Event for when the arc has mouse leave. `(event: any, data: any) => void`

SunburstArcLabel (opens in a new tab)

Prop	Description	Default
`id`	Id set by the parent. `string`
`data`	The internal data object built by d3 `any`
`fill`	Fill color for the arc. `string`	`black`
`radius`	Radius of the chart. Set internally by `SunburstChart`. `number`
`fontSize`	Font size of the text. `number`	`14`
`fontFamily`	Font family of the text. `string`	`sans-serif`
`animated`	Whether the chart is animated or not. `boolean`

Scatter Plot Sparkline