Gallery

Monthly Financial Overview

AG
$ npx flitter-ui add stacked-bar-chart --ag

Code

import StackedBarChart from "@/components/flitter/charts/stacked-bar-chart";

const chart = StackedBarChart({
  data: {
    labels: ["June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [
      { legend: "Budget", values: [5000, 3000, 5000, 7000, 6000, 4000, 1000] },
      { legend: "Income", values: [8000, 4000, 7000, 2000, 6000, 3000, 5000] },
      { legend: "Expenses", values: [4000, 3000, 5000, 4000, 3000, 4000, 3000] },
      { legend: "Debt", values: [6000, 3000, 3000, 2000, 5000, 4000, 2000] },
    ],
  },
  config: {
    title: { text: "Monthly Financial Overview", visible: true },
    legend: { visible: true, position: "right" },
  },
});

Related Charts