IsoCylinderLineChart

const isoCylinderLineChartFixture = {
  id: "iso-cylinder-line-chart",
  ariaLabel: "Support cases resolved each weekday, 20 July to 14 August 2026",
  data: [
    { label: "Mon 20", value: 246 },
    { label: "Tue 21", value: 268 },
    { label: "Wed 22", value: 254 },
    { label: "Thu 23", value: 291 },
    { label: "Fri 24", value: 277 },
    { label: "Mon 27", value: 286 },
    { label: "Tue 28", value: 318 },
    { label: "Wed 29", value: 301 },
    { label: "Thu 30", value: 344 },
    { label: "Fri 31", value: 327 },
    { label: "Mon 3", value: 312 },
    { label: "Tue 4", value: 336 },
    { label: "Wed 5", value: 348 },
    { label: "Thu 6", value: 361 },
    { label: "Fri 7", value: 339 },
    { label: "Mon 10", value: 328 },
    { label: "Tue 11", value: 352 },
    { label: "Wed 12", value: 341 },
    { label: "Thu 13", value: 374 },
    { label: "Fri 14", value: 358 },
  ],
};
 
import { IsoCylinderLineChart } from "@grassroot/charts-react";
 
export default function IsoCylinderLineChartDemo() {
  return (
    <div>
      <IsoCylinderLineChart {...isoCylinderLineChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const isoCylinderLineChartFixture = {
  id: "iso-cylinder-line-chart",
  ariaLabel: "Support cases resolved each weekday, 20 July to 14 August 2026",
  data: [
    { label: "Mon 20", value: 246 },
    { label: "Tue 21", value: 268 },
    { label: "Wed 22", value: 254 },
    { label: "Thu 23", value: 291 },
    { label: "Fri 24", value: 277 },
    { label: "Mon 27", value: 286 },
    { label: "Tue 28", value: 318 },
    { label: "Wed 29", value: 301 },
    { label: "Thu 30", value: 344 },
    { label: "Fri 31", value: 327 },
    { label: "Mon 3", value: 312 },
    { label: "Tue 4", value: 336 },
    { label: "Wed 5", value: 348 },
    { label: "Thu 6", value: 361 },
    { label: "Fri 7", value: 339 },
    { label: "Mon 10", value: 328 },
    { label: "Tue 11", value: 352 },
    { label: "Wed 12", value: 341 },
    { label: "Thu 13", value: 374 },
    { label: "Fri 14", value: 358 },
  ],
};
 
import { IsoCylinderLineChart } from "@grassroot/charts-vue";
</script>
 
<template><IsoCylinderLineChart v-bind="isoCylinderLineChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const isoCylinderLineChartFixture = {
  id: "iso-cylinder-line-chart",
  ariaLabel: "Support cases resolved each weekday, 20 July to 14 August 2026",
  data: [
    { label: "Mon 20", value: 246 },
    { label: "Tue 21", value: 268 },
    { label: "Wed 22", value: 254 },
    { label: "Thu 23", value: 291 },
    { label: "Fri 24", value: 277 },
    { label: "Mon 27", value: 286 },
    { label: "Tue 28", value: 318 },
    { label: "Wed 29", value: 301 },
    { label: "Thu 30", value: 344 },
    { label: "Fri 31", value: 327 },
    { label: "Mon 3", value: 312 },
    { label: "Tue 4", value: 336 },
    { label: "Wed 5", value: 348 },
    { label: "Thu 6", value: 361 },
    { label: "Fri 7", value: 339 },
    { label: "Mon 10", value: 328 },
    { label: "Tue 11", value: 352 },
    { label: "Wed 12", value: 341 },
    { label: "Thu 13", value: 374 },
    { label: "Fri 14", value: 358 },
  ],
};
 
import { GrassrootIsoCylinderLineChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-iso-cylinder-line-chart-demo",
  standalone: true,
  imports: [GrassrootIsoCylinderLineChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-iso-cylinder-line-chart
    [data]="fixture.data"
    [ariaLabel]="fixture.ariaLabel"
  />`,
})
export class IsoCylinderLineChartDemoComponent {
  readonly fixture = isoCylinderLineChartFixture;
}
 
export default IsoCylinderLineChartDemoComponent;

<script lang="ts">
  const isoCylinderLineChartFixture = {
    id: "iso-cylinder-line-chart",
    ariaLabel: "Support cases resolved each weekday, 20 July to 14 August 2026",
    data: [
      { label: "Mon 20", value: 246 },
      { label: "Tue 21", value: 268 },
      { label: "Wed 22", value: 254 },
      { label: "Thu 23", value: 291 },
      { label: "Fri 24", value: 277 },
      { label: "Mon 27", value: 286 },
      { label: "Tue 28", value: 318 },
      { label: "Wed 29", value: 301 },
      { label: "Thu 30", value: 344 },
      { label: "Fri 31", value: 327 },
      { label: "Mon 3", value: 312 },
      { label: "Tue 4", value: 336 },
      { label: "Wed 5", value: 348 },
      { label: "Thu 6", value: 361 },
      { label: "Fri 7", value: 339 },
      { label: "Mon 10", value: 328 },
      { label: "Tue 11", value: 352 },
      { label: "Wed 12", value: 341 },
      { label: "Thu 13", value: 374 },
      { label: "Fri 14", value: 358 },
    ],
  };
 
  import { IsoCylinderLineChart } from "@grassroot/charts-svelte";
</script>
 
<IsoCylinderLineChart {...isoCylinderLineChartFixture} />

/** @jsxImportSource solid-js */
const isoCylinderLineChartFixture = {
  id: "iso-cylinder-line-chart",
  ariaLabel: "Support cases resolved each weekday, 20 July to 14 August 2026",
  data: [
    { label: "Mon 20", value: 246 },
    { label: "Tue 21", value: 268 },
    { label: "Wed 22", value: 254 },
    { label: "Thu 23", value: 291 },
    { label: "Fri 24", value: 277 },
    { label: "Mon 27", value: 286 },
    { label: "Tue 28", value: 318 },
    { label: "Wed 29", value: 301 },
    { label: "Thu 30", value: 344 },
    { label: "Fri 31", value: 327 },
    { label: "Mon 3", value: 312 },
    { label: "Tue 4", value: 336 },
    { label: "Wed 5", value: 348 },
    { label: "Thu 6", value: 361 },
    { label: "Fri 7", value: 339 },
    { label: "Mon 10", value: 328 },
    { label: "Tue 11", value: 352 },
    { label: "Wed 12", value: 341 },
    { label: "Thu 13", value: 374 },
    { label: "Fri 14", value: 358 },
  ],
};
 
import { IsoCylinderLineChart } from "@grassroot/charts-solid";
 
export default function IsoCylinderLineChartDemo() {
  return <IsoCylinderLineChart {...isoCylinderLineChartFixture} />;
}