WaffleChart

import { WaffleChart } from "@grassroot/charts-react";
const values = [
  {
    id: "wind",
    label: "Wind",
    value: 28,
    color: "var(--accent)",
  },
  {
    id: "solar",
    label: "Solar",
    value: 19,
    color: "var(--vs-warning)",
  },
  {
    id: "nuclear",
    label: "Nuclear",
    value: 16,
    color: "var(--vs-info)",
  },
  {
    id: "hydro",
    label: "Hydro",
    value: 12,
    color: "var(--vs-success)",
  },
  {
    id: "biomass",
    label: "Biomass",
    value: 8,
    color: "var(--vs-error)",
  },
  {
    id: "storage",
    label: "Storage",
    value: 7,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "interconnect",
    label: "Interconnect",
    value: 6,
    color: "var(--accent)",
  },
  {
    id: "gas",
    label: "Gas peak",
    value: 4,
    color: "var(--vs-warning)",
  },
];
 
export default function WaffleChartDemo() {
  return (
    <div>
      <WaffleChart
        data={values}
        total={100}
        ariaLabel="Great Britain electricity supply mix across eight sources, July 2026" />
    </div>
  );
}

<script setup lang="ts">
import { WaffleChart } from "@grassroot/charts-vue";
const values = [
  {
    id: "wind",
    label: "Wind",
    value: 28,
    color: "var(--accent)",
  },
  {
    id: "solar",
    label: "Solar",
    value: 19,
    color: "var(--vs-warning)",
  },
  {
    id: "nuclear",
    label: "Nuclear",
    value: 16,
    color: "var(--vs-info)",
  },
  {
    id: "hydro",
    label: "Hydro",
    value: 12,
    color: "var(--vs-success)",
  },
  {
    id: "biomass",
    label: "Biomass",
    value: 8,
    color: "var(--vs-error)",
  },
  {
    id: "storage",
    label: "Storage",
    value: 7,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "interconnect",
    label: "Interconnect",
    value: 6,
    color: "var(--accent)",
  },
  {
    id: "gas",
    label: "Gas peak",
    value: 4,
    color: "var(--vs-warning)",
  },
];
</script>
 
<template>
  <WaffleChart
    :data="values"
    :total="100"
    aria-label="Great Britain electricity supply mix across eight sources, July 2026" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootWaffleChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-waffle-chart-chart-demo",
  standalone: true,
  imports: [GrassrootWaffleChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-waffle-chart
    [data]="values"
    [total]="100"
    ariaLabel="Great Britain electricity supply mix across eight sources, July 2026"
  />`,
})
export class WaffleChartDemoComponent {
  readonly values = [
    {
      id: "wind",
      label: "Wind",
      value: 28,
      color: "var(--accent)",
    },
    {
      id: "solar",
      label: "Solar",
      value: 19,
      color: "var(--vs-warning)",
    },
    {
      id: "nuclear",
      label: "Nuclear",
      value: 16,
      color: "var(--vs-info)",
    },
    {
      id: "hydro",
      label: "Hydro",
      value: 12,
      color: "var(--vs-success)",
    },
    {
      id: "biomass",
      label: "Biomass",
      value: 8,
      color: "var(--vs-error)",
    },
    {
      id: "storage",
      label: "Storage",
      value: 7,
      color: "var(--vs-neutral-400)",
    },
    {
      id: "interconnect",
      label: "Interconnect",
      value: 6,
      color: "var(--accent)",
    },
    {
      id: "gas",
      label: "Gas peak",
      value: 4,
      color: "var(--vs-warning)",
    },
  ];
}
 
export default WaffleChartDemoComponent;

<script lang="ts">
  import { WaffleChart } from "@grassroot/charts-svelte";
  const values = [
    {
      id: "wind",
      label: "Wind",
      value: 28,
      color: "var(--accent)",
    },
    {
      id: "solar",
      label: "Solar",
      value: 19,
      color: "var(--vs-warning)",
    },
    {
      id: "nuclear",
      label: "Nuclear",
      value: 16,
      color: "var(--vs-info)",
    },
    {
      id: "hydro",
      label: "Hydro",
      value: 12,
      color: "var(--vs-success)",
    },
    {
      id: "biomass",
      label: "Biomass",
      value: 8,
      color: "var(--vs-error)",
    },
    {
      id: "storage",
      label: "Storage",
      value: 7,
      color: "var(--vs-neutral-400)",
    },
    {
      id: "interconnect",
      label: "Interconnect",
      value: 6,
      color: "var(--accent)",
    },
    {
      id: "gas",
      label: "Gas peak",
      value: 4,
      color: "var(--vs-warning)",
    },
  ];
</script>
 
<WaffleChart
  data={values}
  total={100}
  ariaLabel="Great Britain electricity supply mix across eight sources, July 2026" />

/** @jsxImportSource solid-js */
import { WaffleChart } from "@grassroot/charts-solid";
const values = [
  {
    id: "wind",
    label: "Wind",
    value: 28,
    color: "var(--accent)",
  },
  {
    id: "solar",
    label: "Solar",
    value: 19,
    color: "var(--vs-warning)",
  },
  {
    id: "nuclear",
    label: "Nuclear",
    value: 16,
    color: "var(--vs-info)",
  },
  {
    id: "hydro",
    label: "Hydro",
    value: 12,
    color: "var(--vs-success)",
  },
  {
    id: "biomass",
    label: "Biomass",
    value: 8,
    color: "var(--vs-error)",
  },
  {
    id: "storage",
    label: "Storage",
    value: 7,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "interconnect",
    label: "Interconnect",
    value: 6,
    color: "var(--accent)",
  },
  {
    id: "gas",
    label: "Gas peak",
    value: 4,
    color: "var(--vs-warning)",
  },
];
 
export default function WaffleChartDemo() {
  return (
    <WaffleChart
      data={values}
      total={100}
      ariaLabel="Great Britain electricity supply mix across eight sources, July 2026" />
  );
}