DonutChart

import { DonutChart } from "@grassroot/charts-react"; 
const donutData = [
  { label: "API", value: 42, color: "var(--accent)" },
  { label: "Web", value: 28, color: "var(--vs-success)" },
  { label: "Mobile", value: 18, color: "var(--vs-warning)" },
  { label: "Other", value: 12, color: "var(--vs-info)" },
];
 
<DonutChart animation={{ durationMs: 560, staggerMs: 44 }} centerLabel="2.4M" centerSub="REQUESTS" data={donutData} />

<script setup lang="ts">
import { DonutChart } from "@grassroot/charts-vue";
 
const donutData = [
  { label: "API", value: 42, color: "var(--accent)" },
  { label: "Web", value: 28, color: "var(--vs-success)" },
  { label: "Mobile", value: 18, color: "var(--vs-warning)" },
  { label: "Other", value: 12, color: "var(--vs-info)" },
];
</script>
 
<template>
  <DonutChart :animation='{ durationMs: 560, staggerMs: 44 }' centerLabel="2.4M" centerSub="REQUESTS" :data='donutData' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDonutChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-donut-chart-chart-demo",
  standalone: true,
  imports: [GrassrootDonutChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-donut-chart [animation]='{ durationMs: 560, staggerMs: 44 }' centerLabel="2.4M" centerSub="REQUESTS" [data]='donutData' />`,
})
export class DonutChartDemoComponent {
  readonly donutData = [
    { label: "API", value: 42, color: "var(--accent)" },
    { label: "Web", value: 28, color: "var(--vs-success)" },
    { label: "Mobile", value: 18, color: "var(--vs-warning)" },
    { label: "Other", value: 12, color: "var(--vs-info)" },
  ];
}
 
export default DonutChartDemoComponent;

<script lang="ts">
  import { DonutChart } from "@grassroot/charts-svelte";
 
  const donutData = [
    { label: "API", value: 42, color: "var(--accent)" },
    { label: "Web", value: 28, color: "var(--vs-success)" },
    { label: "Mobile", value: 18, color: "var(--vs-warning)" },
    { label: "Other", value: 12, color: "var(--vs-info)" },
  ];
</script>
 
<DonutChart animation={{ durationMs: 560, staggerMs: 44 }} centerLabel="2.4M" centerSub="REQUESTS" data={donutData} />

/** @jsxImportSource solid-js */
import { DonutChart } from "@grassroot/charts-solid";
 
const donutData = [
  { label: "API", value: 42, color: "var(--accent)" },
  { label: "Web", value: 28, color: "var(--vs-success)" },
  { label: "Mobile", value: 18, color: "var(--vs-warning)" },
  { label: "Other", value: 12, color: "var(--vs-info)" },
];
 
export default function DonutChartDemo() {
  return <DonutChart animation={{ durationMs: 560, staggerMs: 44 }} centerLabel="2.4M" centerSub="REQUESTS" data={donutData} />;
}