IsoDonutChart

const isoDonutChartFixture = {
  id: "iso-donut-chart",
  ariaLabel: "Subscription customers by plan",
  data: [
    { label: "Free", value: 28 },
    { label: "Starter", value: 22 },
    { label: "Growth", value: 18 },
    { label: "Scale", value: 14 },
    { label: "Business", value: 10 },
    { label: "Enterprise", value: 8 },
  ],
};
 
import { IsoDonutChart } from "@grassroot/charts-react";
 
export default function IsoDonutChartDemo() {
  return (
    <div>
      <IsoDonutChart {...isoDonutChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const isoDonutChartFixture = {
  id: "iso-donut-chart",
  ariaLabel: "Subscription customers by plan",
  data: [
    { label: "Free", value: 28 },
    { label: "Starter", value: 22 },
    { label: "Growth", value: 18 },
    { label: "Scale", value: 14 },
    { label: "Business", value: 10 },
    { label: "Enterprise", value: 8 },
  ],
};
 
import { IsoDonutChart } from "@grassroot/charts-vue";
</script>
 
<template><IsoDonutChart v-bind="isoDonutChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const isoDonutChartFixture = {
  id: "iso-donut-chart",
  ariaLabel: "Subscription customers by plan",
  data: [
    { label: "Free", value: 28 },
    { label: "Starter", value: 22 },
    { label: "Growth", value: 18 },
    { label: "Scale", value: 14 },
    { label: "Business", value: 10 },
    { label: "Enterprise", value: 8 },
  ],
};
 
import { GrassrootIsoDonutChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-iso-donut-chart-demo",
  standalone: true,
  imports: [GrassrootIsoDonutChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-iso-donut-chart
    [data]="fixture.data" [ariaLabel]="fixture.ariaLabel"
  />`,
})
export class IsoDonutChartDemoComponent {
  readonly fixture = isoDonutChartFixture;
}
 
export default IsoDonutChartDemoComponent;

<script lang="ts">
  const isoDonutChartFixture = {
    id: "iso-donut-chart",
    ariaLabel: "Subscription customers by plan",
    data: [
      { label: "Free", value: 28 },
      { label: "Starter", value: 22 },
      { label: "Growth", value: 18 },
      { label: "Scale", value: 14 },
      { label: "Business", value: 10 },
      { label: "Enterprise", value: 8 },
    ],
  };
 
  import { IsoDonutChart } from "@grassroot/charts-svelte";
</script>
 
<IsoDonutChart {...isoDonutChartFixture} />

/** @jsxImportSource solid-js */
const isoDonutChartFixture = {
  id: "iso-donut-chart",
  ariaLabel: "Subscription customers by plan",
  data: [
    { label: "Free", value: 28 },
    { label: "Starter", value: 22 },
    { label: "Growth", value: 18 },
    { label: "Scale", value: 14 },
    { label: "Business", value: 10 },
    { label: "Enterprise", value: 8 },
  ],
};
 
import { IsoDonutChart } from "@grassroot/charts-solid";
 
export default function IsoDonutChartDemo() {
  return <IsoDonutChart {...isoDonutChartFixture} />;
}