A clean stacked column chart for comparing several categories over time while also showing their total. Each bar aggregates multiple series with soft gradients so contributions are easy to spot and totals are readable at a glance. Month labels anchor the X-axis, while a compact Y-axis with gridlines helps judge scale. Smooth animations on load make shifts between months feel alive without distracting from data. The component is responsive, themeable, and works equally well in cards or full-width dashboards. Ideal when you need both part-to-whole context and trend comparisons on mobile and web.

Functionality

• Stacked bars for multiple series with cumulative totals

• Optional percent-stacked mode and total value labels

• Custom axes: month/category labels, tick density, gridlines

• Legend with series toggles; highlight/hover state (tooltips ready)

• Animation controls (duration/ease), rounded corners, gradients

• Theme & layout options: colors, fonts, spacing, dark/light mode, responsive sizing

Use cases

• Monthly revenue breakdown by product/channel with grand totals

• Cost distribution (CAPEX/OPEX) over time with trend context

• Traffic sources, conversions, or engagement by month

• Resource allocation or workload split across teams/projects

• KPI dashboards in SaaS, ecommerce, finance, and ops reporting

Keywords

stacked bar chart, multi series bar chart, percent stacked, part-to-whole, monthly chart, time series, categorical chart, dashboard chart, analytics visualization, KPI chart, gradient bars, rounded bars, responsive chart, legend toggle, tooltips, gridlines, dark mode, Flutter chart, FlutterFlow component, data visualization