Monthly Financial Overview
AG
$ npx flitter-ui add stacked-bar-chart --agCode
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" },
},
});