DonutChart

import { DonutChart } from "@grassroot/charts-react";
 
const donutData = [
  {
    label: "Direct web",
    value: 812,
    color: "var(--accent)",
  },
  {
    label: "Partner referrals",
    value: 546,
    color: "var(--vs-success)",
  },
  {
    label: "Renewals",
    value: 418,
    color: "var(--vs-warning)",
  },
  {
    label: "Marketplace",
    value: 267,
    color: "var(--vs-info)",
  },
  {
    label: "Field sales",
    value: 194,
    color: "var(--vs-error)",
  },
  {
    label: "Events",
    value: 128,
    color: "var(--vs-neutral-400)",
  },
  {
    label: "Community",
    value: 86,
    color: "var(--accent)",
  },
  {
    label: "Reseller",
    value: 73,
    color: "var(--vs-success)",
  },
];
 
export default function DonutChartDemo() {
  return (
    <div>
      <DonutChart
        animation={{ durationMs: 560, staggerMs: 44 }}
        centerLabel="£2.52M"
        centerSub="Q2 REVENUE"
        data={donutData}
        ariaLabel="Second-quarter revenue of 2.52 million pounds, split by eight sales channels" />
    </div>
  );
}

<script setup lang="ts">
import { DonutChart } from "@grassroot/charts-vue";
 
const donutData = [
  {
    label: "Direct web",
    value: 812,
    color: "var(--accent)",
  },
  {
    label: "Partner referrals",
    value: 546,
    color: "var(--vs-success)",
  },
  {
    label: "Renewals",
    value: 418,
    color: "var(--vs-warning)",
  },
  {
    label: "Marketplace",
    value: 267,
    color: "var(--vs-info)",
  },
  {
    label: "Field sales",
    value: 194,
    color: "var(--vs-error)",
  },
  {
    label: "Events",
    value: 128,
    color: "var(--vs-neutral-400)",
  },
  {
    label: "Community",
    value: 86,
    color: "var(--accent)",
  },
  {
    label: "Reseller",
    value: 73,
    color: "var(--vs-success)",
  },
];
</script>
 
<template>
  <div>
    <DonutChart
      :animation="{ durationMs: 560, staggerMs: 44 }"
      centerLabel="£2.52M"
      centerSub="Q2 REVENUE"
      :data="donutData"
      aria-label="Second-quarter revenue of 2.52 million pounds, split by eight sales channels" />
  </div>
</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.52M"
    centerSub="Q2 REVENUE"
    [data]="donutData"
    ariaLabel="Second-quarter revenue of 2.52 million pounds, split by eight sales channels"
  />`,
})
export class DonutChartDemoComponent {
  readonly donutData = [
    {
      label: "Direct web",
      value: 812,
      color: "var(--accent)",
    },
    {
      label: "Partner referrals",
      value: 546,
      color: "var(--vs-success)",
    },
    {
      label: "Renewals",
      value: 418,
      color: "var(--vs-warning)",
    },
    {
      label: "Marketplace",
      value: 267,
      color: "var(--vs-info)",
    },
    {
      label: "Field sales",
      value: 194,
      color: "var(--vs-error)",
    },
    {
      label: "Events",
      value: 128,
      color: "var(--vs-neutral-400)",
    },
    {
      label: "Community",
      value: 86,
      color: "var(--accent)",
    },
    {
      label: "Reseller",
      value: 73,
      color: "var(--vs-success)",
    },
  ];
}
 
export default DonutChartDemoComponent;

<script lang="ts">
  import { DonutChart } from "@grassroot/charts-svelte";
 
  const donutData = [
    {
      label: "Direct web",
      value: 812,
      color: "var(--accent)",
    },
    {
      label: "Partner referrals",
      value: 546,
      color: "var(--vs-success)",
    },
    {
      label: "Renewals",
      value: 418,
      color: "var(--vs-warning)",
    },
    {
      label: "Marketplace",
      value: 267,
      color: "var(--vs-info)",
    },
    {
      label: "Field sales",
      value: 194,
      color: "var(--vs-error)",
    },
    {
      label: "Events",
      value: 128,
      color: "var(--vs-neutral-400)",
    },
    {
      label: "Community",
      value: 86,
      color: "var(--accent)",
    },
    {
      label: "Reseller",
      value: 73,
      color: "var(--vs-success)",
    },
  ];
</script>
 
<div>
  <DonutChart
    animation={{ durationMs: 560, staggerMs: 44 }}
    centerLabel="£2.52M"
    centerSub="Q2 REVENUE"
    data={donutData}
    ariaLabel="Second-quarter revenue of 2.52 million pounds, split by eight sales channels" />
</div>

/** @jsxImportSource solid-js */
import { DonutChart } from "@grassroot/charts-solid";
 
const donutData = [
  {
    label: "Direct web",
    value: 812,
    color: "var(--accent)",
  },
  {
    label: "Partner referrals",
    value: 546,
    color: "var(--vs-success)",
  },
  {
    label: "Renewals",
    value: 418,
    color: "var(--vs-warning)",
  },
  {
    label: "Marketplace",
    value: 267,
    color: "var(--vs-info)",
  },
  {
    label: "Field sales",
    value: 194,
    color: "var(--vs-error)",
  },
  {
    label: "Events",
    value: 128,
    color: "var(--vs-neutral-400)",
  },
  {
    label: "Community",
    value: 86,
    color: "var(--accent)",
  },
  {
    label: "Reseller",
    value: 73,
    color: "var(--vs-success)",
  },
];
 
export default function DonutChartDemo() {
  return (
    <div>
      <DonutChart
        animation={{ durationMs: 560, staggerMs: 44 }}
        centerLabel="£2.52M"
        centerSub="Q2 REVENUE"
        data={donutData}
        ariaLabel="Second-quarter revenue of 2.52 million pounds, split by eight sales channels" />
    </div>
  );
}