Revenue breakdownPro

• Stacked areas above and below zero
• Draggable range brush
• Toggle series from the legend
• MRR, net new and churn KPIs

• Explaining what drove MRR change month by month.
• Investor or board reporting views.

• A single revenue number: use a KPI card.

Import it from @/components/blocks/revenue-breakdown after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { RevenueBreakdown } from "@/components/blocks/revenue-breakdown";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <RevenueBreakdown />
    </main>
  );
}

• Range handles are role="slider" with the month as aria-valuetext.
• Legend items are toggle buttons with aria-pressed.
• KPIs are text, so the totals don't depend on the chart.

• The chart morphs as the window moves.
• KPI digits roll as totals change.

• The brush works with touch and pointer drag.
• KPIs wrap to two columns on phones.

• 24 months of data; the chart recomputes paths only for the selected window.
• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Churn values are positive numbers marked negative: true; the chart draws them below zero.