ThresholdChart

const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
const latency = [218, 232, 241, 267, 284, 258, 246, 219, 238, 271, 296, 244];
 
const thresholdChartFixture = {
  id: "threshold-chart",
  data: latency.map((y, x) => ({ x, y, y1: 250, label: days[x] })),
  threshold: 250,
  ariaLabel: "Checkout API p95 latency against a 250 millisecond service objective, 6 to 17 July 2026",
  tooltip: false,
  legend: false,
};
 
import { ThresholdChart } from "@grassroot/charts-react";
 
export default function ThresholdChartDemo() {
  return (
    <div>
      <ThresholdChart {...thresholdChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
const latency = [218, 232, 241, 267, 284, 258, 246, 219, 238, 271, 296, 244];
 
const thresholdChartFixture = {
  id: "threshold-chart",
  data: latency.map((y, x) => ({ x, y, y1: 250, label: days[x] })),
  threshold: 250,
  ariaLabel: "Checkout API p95 latency against a 250 millisecond service objective, 6 to 17 July 2026",
  tooltip: false,
  legend: false,
};
 
import { ThresholdChart } from "@grassroot/charts-vue";
</script>
<template><ThresholdChart v-bind="thresholdChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
const latency = [218, 232, 241, 267, 284, 258, 246, 219, 238, 271, 296, 244];
 
const thresholdChartFixture = {
  id: "threshold-chart",
  data: latency.map((y, x) => ({ x, y, y1: 250, label: days[x] })),
  threshold: 250,
  ariaLabel: "Checkout API p95 latency against a 250 millisecond service objective, 6 to 17 July 2026",
  tooltip: false,
  legend: false,
};
 
import { GrassrootThresholdChart } from "@grassroot/charts-angular";
@Component({
  selector: "app-threshold-chart-chart-demo",
  standalone: true,
  imports: [GrassrootThresholdChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-threshold-chart
    [data]="fixture.data"
    [threshold]="fixture.threshold"
    [ariaLabel]="fixture.ariaLabel"
  />`,
})
export class ThresholdChartDemoComponent {
  readonly fixture = thresholdChartFixture;
}
export default ThresholdChartDemoComponent;

<script lang="ts">
  const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
  const latency = [218, 232, 241, 267, 284, 258, 246, 219, 238, 271, 296, 244];
 
  const thresholdChartFixture = {
    id: "threshold-chart",
    data: latency.map((y, x) => ({ x, y, y1: 250, label: days[x] })),
    threshold: 250,
    ariaLabel: "Checkout API p95 latency against a 250 millisecond service objective, 6 to 17 July 2026",
    tooltip: false,
    legend: false,
  };
 
  import { ThresholdChart } from "@grassroot/charts-svelte";
</script>
 
<ThresholdChart {...thresholdChartFixture} />

/** @jsxImportSource solid-js */
const days = ["Mon 6", "Tue 7", "Wed 8", "Thu 9", "Fri 10", "Sat 11", "Sun 12", "Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17"] as const;
const latency = [218, 232, 241, 267, 284, 258, 246, 219, 238, 271, 296, 244];
 
const thresholdChartFixture = {
  id: "threshold-chart",
  data: latency.map((y, x) => ({ x, y, y1: 250, label: days[x] })),
  threshold: 250,
  ariaLabel: "Checkout API p95 latency against a 250 millisecond service objective, 6 to 17 July 2026",
  tooltip: false,
  legend: false,
};
 
import { ThresholdChart } from "@grassroot/charts-solid";
export default function ThresholdChartDemo() {
  return <ThresholdChart {...thresholdChartFixture} />;
}