IsoColumnChart

const isoColumnChartFixture = {
  id: "iso-column-chart",
  ariaLabel: "Monthly cloud infrastructure spend by service, thousands of pounds",
  data: [
    { label: "Compute", value: 184 },
    { label: "Databases", value: 126 },
    { label: "Storage", value: 78 },
    { label: "Network", value: 52 },
    { label: "Observability", value: 41 },
    { label: "Security", value: 36 },
    { label: "CDN", value: 28 },
    { label: "ML training", value: 64 },
  ],
};
 
import { IsoColumnChart } from "@grassroot/charts-react";
 
export default function IsoColumnChartDemo() {
  return (
    <div>
      <IsoColumnChart {...isoColumnChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const isoColumnChartFixture = {
  id: "iso-column-chart",
  ariaLabel: "Monthly cloud infrastructure spend by service, thousands of pounds",
  data: [
    { label: "Compute", value: 184 },
    { label: "Databases", value: 126 },
    { label: "Storage", value: 78 },
    { label: "Network", value: 52 },
    { label: "Observability", value: 41 },
    { label: "Security", value: 36 },
    { label: "CDN", value: 28 },
    { label: "ML training", value: 64 },
  ],
};
 
import { IsoColumnChart } from "@grassroot/charts-vue";
</script>
 
<template><IsoColumnChart v-bind="isoColumnChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const isoColumnChartFixture = {
  id: "iso-column-chart",
  ariaLabel: "Monthly cloud infrastructure spend by service, thousands of pounds",
  data: [
    { label: "Compute", value: 184 },
    { label: "Databases", value: 126 },
    { label: "Storage", value: 78 },
    { label: "Network", value: 52 },
    { label: "Observability", value: 41 },
    { label: "Security", value: 36 },
    { label: "CDN", value: 28 },
    { label: "ML training", value: 64 },
  ],
};
 
import { GrassrootIsoColumnChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-iso-column-chart-demo",
  standalone: true,
  imports: [GrassrootIsoColumnChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-iso-column-chart
    [data]="fixture.data" [ariaLabel]="fixture.ariaLabel"
  />`,
})
export class IsoColumnChartDemoComponent {
  readonly fixture = isoColumnChartFixture;
}
 
export default IsoColumnChartDemoComponent;

<script lang="ts">
  const isoColumnChartFixture = {
    id: "iso-column-chart",
    ariaLabel: "Monthly cloud infrastructure spend by service, thousands of pounds",
    data: [
      { label: "Compute", value: 184 },
      { label: "Databases", value: 126 },
      { label: "Storage", value: 78 },
      { label: "Network", value: 52 },
      { label: "Observability", value: 41 },
      { label: "Security", value: 36 },
      { label: "CDN", value: 28 },
      { label: "ML training", value: 64 },
    ],
  };
 
  import { IsoColumnChart } from "@grassroot/charts-svelte";
</script>
 
<IsoColumnChart {...isoColumnChartFixture} />

/** @jsxImportSource solid-js */
const isoColumnChartFixture = {
  id: "iso-column-chart",
  ariaLabel: "Monthly cloud infrastructure spend by service, thousands of pounds",
  data: [
    { label: "Compute", value: 184 },
    { label: "Databases", value: 126 },
    { label: "Storage", value: 78 },
    { label: "Network", value: 52 },
    { label: "Observability", value: 41 },
    { label: "Security", value: 36 },
    { label: "CDN", value: 28 },
    { label: "ML training", value: 64 },
  ],
};
 
import { IsoColumnChart } from "@grassroot/charts-solid";
 
export default function IsoColumnChartDemo() {
  return <IsoColumnChart {...isoColumnChartFixture} />;
}