Gallery

Revenue to Operating Profit ($k)

AG style
$ npx flitter-ui add waterfall-chart --ag

Code

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

const chart = WaterfallChart({
  data: {
    rows: [
      {
        item: "Revenue",
        amount: 180,
      },
      {
        item: "Services",
        amount: 25,
      },
      {
        item: "Materials",
        amount: -54,
      },
      {
        item: "Payroll",
        amount: -62,
      },
      {
        item: "Operations",
        amount: -24,
      },
    ],
    xKey: "item",
    yKey: "amount",
    totals: [
      {
        totalType: "total",
        index: 4,
        axisLabel: "Profit",
      },
    ],
  },

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

More waterfall charts