SunburstChart

import { SunburstChart } from "@grassroot/charts-react";
 
const hierarchy = {
  label: "portfolio",
  children: [
    { label: "Platform", value: 18 },
    { label: "Product", children: [{ label: "Charts", value: 12 }, { label: "Catalog", value: 7 }] },
  ],
};
 
 
<SunburstChart root={hierarchy} />

<script setup lang="ts">
import { SunburstChart } from "@grassroot/charts-vue";
 
const hierarchy = {
  label: "portfolio",
  children: [
    { label: "Platform", value: 18 },
    { label: "Product", children: [{ label: "Charts", value: 12 }, { label: "Catalog", value: 7 }] },
  ],
};
</script>
 
<template>
  <SunburstChart :root='hierarchy' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootSunburstChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-sunburst-chart-chart-demo",
  standalone: true,
  imports: [GrassrootSunburstChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-sunburst-chart [root]='hierarchy' />`,
})
export class SunburstChartDemoComponent {
  readonly hierarchy = {
    label: "portfolio",
    children: [
      { label: "Platform", value: 18 },
      { label: "Product", children: [{ label: "Charts", value: 12 }, { label: "Catalog", value: 7 }] },
    ],
  };
}
 
export default SunburstChartDemoComponent;

<script lang="ts">
  import { SunburstChart } from "@grassroot/charts-svelte";
 
  const hierarchy = {
    label: "portfolio",
    children: [
      { label: "Platform", value: 18 },
      { label: "Product", children: [{ label: "Charts", value: 12 }, { label: "Catalog", value: 7 }] },
    ],
  };
</script>
 
<SunburstChart root={hierarchy} />

/** @jsxImportSource solid-js */
import { SunburstChart } from "@grassroot/charts-solid";
 
const hierarchy = {
  label: "portfolio",
  children: [
    { label: "Platform", value: 18 },
    { label: "Product", children: [{ label: "Charts", value: 12 }, { label: "Catalog", value: 7 }] },
  ],
};
 
export default function SunburstChartDemo() {
  return <SunburstChart root={hierarchy} />;
}