Financial P&L Dashboard

Finance

Profit & loss waterfall with quarterly revenue comparison, margin trends, and expense category breakdown.

Net Revenue

$4.2M

+15%

Gross Margin

68.4%

+2.1%

Operating Exp

$1.8M

+8%

Net Income

$842K

+24%
Annual P&L Breakdown
RevenueCOGSGross ProfitR&DSales & MarketingG&AOperating IncomeInterestTaxNet Income02M4M6M
Quarterly Revenue
Q1Q2Q3Q405001K1.5K20242025
Margin Trends
Q1Q2Q3Q4020406080Gross MarginOperating MarginNet Margin

Implementation

dashboard.tsx
import { WaterfallChart, BarChart, LineChart } from "@chartts/react"

export function FinancialDashboard() {
  return (
    <div className="space-y-6">
      <WaterfallChart
        data={plData}
        x="category" y="amount"
        className="h-96 rounded-xl bg-zinc-950 p-4"
      />
      <div className="grid grid-cols-2 gap-4">
        <BarChart data={quarterlyRev} x="quarter" y={["2024","2025"]} className="h-72" />
        <LineChart data={margins} x="quarter" y={["gross","operating","net"]} className="h-72" />
      </div>
    </div>
  )
}