IsoExplodedStackChart

const isoExplodedStackChartFixture = {
  id: "iso-exploded-stack-chart",
  ariaLabel: "Net promoter score responses by category, Q2 2026",
  data: [
    { label: "Promoters 9–10", value: 2418 },
    { label: "Passives 7–8", value: 1052 },
    { label: "Detractors 5–6", value: 486 },
    { label: "Detractors 0–4", value: 254 },
  ],
};
 
import { IsoExplodedStackChart } from "@grassroot/charts-react";
 
export default function IsoExplodedStackChartDemo() {
  return (
    <div>
      <IsoExplodedStackChart {...isoExplodedStackChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const isoExplodedStackChartFixture = {
  id: "iso-exploded-stack-chart",
  ariaLabel: "Net promoter score responses by category, Q2 2026",
  data: [
    { label: "Promoters 9–10", value: 2418 },
    { label: "Passives 7–8", value: 1052 },
    { label: "Detractors 5–6", value: 486 },
    { label: "Detractors 0–4", value: 254 },
  ],
};
 
import { IsoExplodedStackChart } from "@grassroot/charts-vue";
</script>
 
<template><IsoExplodedStackChart v-bind="isoExplodedStackChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const isoExplodedStackChartFixture = {
  id: "iso-exploded-stack-chart",
  ariaLabel: "Net promoter score responses by category, Q2 2026",
  data: [
    { label: "Promoters 9–10", value: 2418 },
    { label: "Passives 7–8", value: 1052 },
    { label: "Detractors 5–6", value: 486 },
    { label: "Detractors 0–4", value: 254 },
  ],
};
 
import { GrassrootIsoExplodedStackChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-iso-exploded-stack-chart-demo",
  standalone: true,
  imports: [GrassrootIsoExplodedStackChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-iso-exploded-stack-chart
    [data]="fixture.data"
    [ariaLabel]="fixture.ariaLabel"
  />`,
})
export class IsoExplodedStackChartDemoComponent {
  readonly fixture = isoExplodedStackChartFixture;
}
 
export default IsoExplodedStackChartDemoComponent;

<script lang="ts">
  const isoExplodedStackChartFixture = {
    id: "iso-exploded-stack-chart",
    ariaLabel: "Net promoter score responses by category, Q2 2026",
    data: [
      { label: "Promoters 9–10", value: 2418 },
      { label: "Passives 7–8", value: 1052 },
      { label: "Detractors 5–6", value: 486 },
      { label: "Detractors 0–4", value: 254 },
    ],
  };
 
  import { IsoExplodedStackChart } from "@grassroot/charts-svelte";
</script>
 
<IsoExplodedStackChart {...isoExplodedStackChartFixture} />

/** @jsxImportSource solid-js */
const isoExplodedStackChartFixture = {
  id: "iso-exploded-stack-chart",
  ariaLabel: "Net promoter score responses by category, Q2 2026",
  data: [
    { label: "Promoters 9–10", value: 2418 },
    { label: "Passives 7–8", value: 1052 },
    { label: "Detractors 5–6", value: 486 },
    { label: "Detractors 0–4", value: 254 },
  ],
};
 
import { IsoExplodedStackChart } from "@grassroot/charts-solid";
 
export default function IsoExplodedStackChartDemo() {
  return <IsoExplodedStackChart {...isoExplodedStackChartFixture} />;
}