Charts

<SunburstChart data={data} size={460}>
  <SunburstBreadcrumb>
    <SunburstDrillBreadcrumb />
  </SunburstBreadcrumb>
  {arcs.map((arc) => (
    <SunburstSegment index={arc.arcIndex} key={arc.id} />
  ))}
  <SunburstCenter />
  <SunburstLabels />
  <SunburstHint />
</SunburstChart>

<SunburstChart data={data} size={320}>
  <PatternPreset
    color="var(--chart-1)"
    id="inner-product"
    preset="diagonal-up"
  />
  <PatternPreset
    color="var(--chart-3)"
    id="inner-partners"
    preset="diagonal-up"
  />
  <SunburstSegment index={0} fill="url(#inner-product)" />
  <SunburstSegment index={2} fill="url(#inner-partners)" />
  <SunburstCenter />
</SunburstChart>

const { items, arcIndices } = legendForFocus(data, focusId);

<SunburstChart
  data={data}
  focusId={focusId}
  hoveredIndex={hoveredIndex}
  onFocusChange={setFocusId}
  onHoverChange={setHoveredIndex}
>
  {arcs.map((arc) => (
    <SunburstSegment index={arc.arcIndex} key={arc.id} />
  ))}
  <SunburstCenter />
</SunburstChart>
<Legend hoveredIndex={legendIndex} items={items} onHoverChange={setLegendIndex}>
  <LegendItemComponent>
    <LegendMarker />
    <LegendLabel />
    <LegendValue showPercentage />
  </LegendItemComponent>
</Legend>