Gallery

Project Budget Remaining ($k)

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

Code

import ToastWaterfallChart from "@/components/flitter/charts/toast-waterfall-chart";

const chart = ToastWaterfallChart({
  data: {
    rows: [
      {
        item: "Budget",
        amount: 120,
      },
      {
        item: "Design",
        amount: -22,
      },
      {
        item: "Engineering",
        amount: -46,
      },
      {
        item: "QA",
        amount: -14,
      },
      {
        item: "Scope added",
        amount: 18,
      },
      {
        item: "Launch",
        amount: -12,
      },
    ],
    xKey: "item",
    yKey: "amount",
    totals: [
      {
        totalType: "total",
        index: 5,
        axisLabel: "Remaining",
      },
    ],
  },

  config: { title: { text: galleryTitle, visible: true } },
});

More waterfall charts