BulletChart

import { BulletChart } from "@grassroot/charts-react";
const values = [
  {
    id: "at-risk",
    label: "At risk",
    value: 80,
    color: "var(--vs-error)",
  },
  {
    id: "watch",
    label: "Watch",
    value: 88,
    color: "var(--vs-warning)",
  },
  {
    id: "on-track",
    label: "On track",
    value: 94,
    color: "var(--vs-info)",
  },
  {
    id: "excellent",
    label: "Excellent",
    value: 100,
    color: "var(--vs-success)",
  },
];
 
export default function BulletChartDemo() {
  return (
    <div>
      <BulletChart
        value={93.4}
        target={95}
        ranges={values}
        ariaLabel="Gross revenue retention at 93.4 percent against a 95 percent target across four qualitative ranges, Q2 2026" />
    </div>
  );
}

<script setup lang="ts">
import { BulletChart } from "@grassroot/charts-vue";
const values = [
  {
    id: "at-risk",
    label: "At risk",
    value: 80,
    color: "var(--vs-error)",
  },
  {
    id: "watch",
    label: "Watch",
    value: 88,
    color: "var(--vs-warning)",
  },
  {
    id: "on-track",
    label: "On track",
    value: 94,
    color: "var(--vs-info)",
  },
  {
    id: "excellent",
    label: "Excellent",
    value: 100,
    color: "var(--vs-success)",
  },
];
</script>
 
<template>
  <BulletChart
    :value="93.4"
    :target="95"
    :ranges="values"
    aria-label="Gross revenue retention at 93.4 percent against a 95 percent target across four qualitative ranges, Q2 2026" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootBulletChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-bullet-chart-chart-demo",
  standalone: true,
  imports: [GrassrootBulletChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-bullet-chart
    [value]="93.4"
    [target]="95"
    [ranges]="values"
    ariaLabel="Gross revenue retention at 93.4 percent against a 95 percent target across four qualitative ranges, Q2 2026"
  />`,
})
export class BulletChartDemoComponent {
  readonly values = [
    {
      id: "at-risk",
      label: "At risk",
      value: 80,
      color: "var(--vs-error)",
    },
    {
      id: "watch",
      label: "Watch",
      value: 88,
      color: "var(--vs-warning)",
    },
    {
      id: "on-track",
      label: "On track",
      value: 94,
      color: "var(--vs-info)",
    },
    {
      id: "excellent",
      label: "Excellent",
      value: 100,
      color: "var(--vs-success)",
    },
  ];
}
 
export default BulletChartDemoComponent;

<script lang="ts">
  import { BulletChart } from "@grassroot/charts-svelte";
  const values = [
    {
      id: "at-risk",
      label: "At risk",
      value: 80,
      color: "var(--vs-error)",
    },
    {
      id: "watch",
      label: "Watch",
      value: 88,
      color: "var(--vs-warning)",
    },
    {
      id: "on-track",
      label: "On track",
      value: 94,
      color: "var(--vs-info)",
    },
    {
      id: "excellent",
      label: "Excellent",
      value: 100,
      color: "var(--vs-success)",
    },
  ];
</script>
 
<BulletChart
  value={93.4}
  target={95}
  ranges={values}
  ariaLabel="Gross revenue retention at 93.4 percent against a 95 percent target across four qualitative ranges, Q2 2026" />

/** @jsxImportSource solid-js */
import { BulletChart } from "@grassroot/charts-solid";
const values = [
  {
    id: "at-risk",
    label: "At risk",
    value: 80,
    color: "var(--vs-error)",
  },
  {
    id: "watch",
    label: "Watch",
    value: 88,
    color: "var(--vs-warning)",
  },
  {
    id: "on-track",
    label: "On track",
    value: 94,
    color: "var(--vs-info)",
  },
  {
    id: "excellent",
    label: "Excellent",
    value: 100,
    color: "var(--vs-success)",
  },
];
 
export default function BulletChartDemo() {
  return (
    <BulletChart
      value={93.4}
      target={95}
      ranges={values}
      ariaLabel="Gross revenue retention at 93.4 percent against a 95 percent target across four qualitative ranges, Q2 2026" />
  );
}