Gallery

Service Quality Against Target (%)

Toast style
$ npx flitter-ui add bullet-chart --toast

Code

import ToastBulletChart from "@/components/flitter/charts/toast-bullet-chart";

const chart = ToastBulletChart({
  data: {
    labels: ["Chat", "Email", "Phone", "Self-service"],
    datasets: [
      {
        value: 94,
        target: 95,
        ranges: [70, 85, 100],
      },
      {
        value: 88,
        target: 90,
        ranges: [70, 85, 100],
      },
      {
        value: 97,
        target: 95,
        ranges: [70, 85, 100],
      },
      {
        value: 82,
        target: 90,
        ranges: [70, 85, 100],
      },
    ],
  },
  direction: "horizontal",
  config: { title: { text: galleryTitle, visible: true } },
});

More bullet charts