PieChart

import { PieChart } from "@grassroot/charts-react";
const values = [
  {
    id: "product",
    label: "Product issue",
    value: 22,
    color: "var(--accent)",
  },
  {
    id: "how-to",
    label: "Setup and how-to",
    value: 16,
    color: "var(--vs-success)",
  },
  {
    id: "billing",
    label: "Billing",
    value: 14,
    color: "var(--vs-warning)",
  },
  {
    id: "access",
    label: "Account access",
    value: 12,
    color: "var(--vs-info)",
  },
  {
    id: "shipping",
    label: "Shipping delay",
    value: 11,
    color: "var(--vs-error)",
  },
  {
    id: "integrations",
    label: "Integrations",
    value: 9,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "performance",
    label: "Performance",
    value: 8,
    color: "var(--accent)",
  },
  {
    id: "other",
    label: "Other",
    value: 8,
    color: "var(--vs-success)",
  },
];
 
export default function PieChartDemo() {
  return (
    <div>
      <PieChart data={values} ariaLabel="Support ticket mix by eight issue types, totaling 100 percent, July 2026" />
    </div>
  );
}

<script setup lang="ts">
import { PieChart } from "@grassroot/charts-vue";
const values = [
  {
    id: "product",
    label: "Product issue",
    value: 22,
    color: "var(--accent)",
  },
  {
    id: "how-to",
    label: "Setup and how-to",
    value: 16,
    color: "var(--vs-success)",
  },
  {
    id: "billing",
    label: "Billing",
    value: 14,
    color: "var(--vs-warning)",
  },
  {
    id: "access",
    label: "Account access",
    value: 12,
    color: "var(--vs-info)",
  },
  {
    id: "shipping",
    label: "Shipping delay",
    value: 11,
    color: "var(--vs-error)",
  },
  {
    id: "integrations",
    label: "Integrations",
    value: 9,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "performance",
    label: "Performance",
    value: 8,
    color: "var(--accent)",
  },
  {
    id: "other",
    label: "Other",
    value: 8,
    color: "var(--vs-success)",
  },
];
</script>
 
<template>
  <PieChart :data="values" aria-label="Support ticket mix by eight issue types, totaling 100 percent, July 2026" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootPieChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-pie-chart-chart-demo",
  standalone: true,
  imports: [GrassrootPieChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-pie-chart
    [data]="values"
    ariaLabel="Support ticket mix by eight issue types, totaling 100 percent, July 2026"
  />`,
})
export class PieChartDemoComponent {
  readonly values = [
    {
      id: "product",
      label: "Product issue",
      value: 22,
      color: "var(--accent)",
    },
    {
      id: "how-to",
      label: "Setup and how-to",
      value: 16,
      color: "var(--vs-success)",
    },
    {
      id: "billing",
      label: "Billing",
      value: 14,
      color: "var(--vs-warning)",
    },
    {
      id: "access",
      label: "Account access",
      value: 12,
      color: "var(--vs-info)",
    },
    {
      id: "shipping",
      label: "Shipping delay",
      value: 11,
      color: "var(--vs-error)",
    },
    {
      id: "integrations",
      label: "Integrations",
      value: 9,
      color: "var(--vs-neutral-400)",
    },
    {
      id: "performance",
      label: "Performance",
      value: 8,
      color: "var(--accent)",
    },
    {
      id: "other",
      label: "Other",
      value: 8,
      color: "var(--vs-success)",
    },
  ];
}
 
export default PieChartDemoComponent;

<script lang="ts">
  import { PieChart } from "@grassroot/charts-svelte";
  const values = [
    {
      id: "product",
      label: "Product issue",
      value: 22,
      color: "var(--accent)",
    },
    {
      id: "how-to",
      label: "Setup and how-to",
      value: 16,
      color: "var(--vs-success)",
    },
    {
      id: "billing",
      label: "Billing",
      value: 14,
      color: "var(--vs-warning)",
    },
    {
      id: "access",
      label: "Account access",
      value: 12,
      color: "var(--vs-info)",
    },
    {
      id: "shipping",
      label: "Shipping delay",
      value: 11,
      color: "var(--vs-error)",
    },
    {
      id: "integrations",
      label: "Integrations",
      value: 9,
      color: "var(--vs-neutral-400)",
    },
    {
      id: "performance",
      label: "Performance",
      value: 8,
      color: "var(--accent)",
    },
    {
      id: "other",
      label: "Other",
      value: 8,
      color: "var(--vs-success)",
    },
  ];
</script>
 
<PieChart data={values} ariaLabel="Support ticket mix by eight issue types, totaling 100 percent, July 2026" />

/** @jsxImportSource solid-js */
import { PieChart } from "@grassroot/charts-solid";
const values = [
  {
    id: "product",
    label: "Product issue",
    value: 22,
    color: "var(--accent)",
  },
  {
    id: "how-to",
    label: "Setup and how-to",
    value: 16,
    color: "var(--vs-success)",
  },
  {
    id: "billing",
    label: "Billing",
    value: 14,
    color: "var(--vs-warning)",
  },
  {
    id: "access",
    label: "Account access",
    value: 12,
    color: "var(--vs-info)",
  },
  {
    id: "shipping",
    label: "Shipping delay",
    value: 11,
    color: "var(--vs-error)",
  },
  {
    id: "integrations",
    label: "Integrations",
    value: 9,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "performance",
    label: "Performance",
    value: 8,
    color: "var(--accent)",
  },
  {
    id: "other",
    label: "Other",
    value: 8,
    color: "var(--vs-success)",
  },
];
 
export default function PieChartDemo() {
  return (
    <PieChart data={values} ariaLabel="Support ticket mix by eight issue types, totaling 100 percent, July 2026" />
  );
}