SaaS Dashboard Charts

Name: Chart.ts
Author: Chart.ts

Every SaaS needs a metrics dashboard. Chart.ts gives you the chart components to build MRR tracking, churn analysis, activation funnels, and cohort retention views. Tailwind CSS styled, server-renderable, under 15kb.

Chart Types You Need

Line Chart

MRR, ARR, and revenue trends over time

Area Chart

Stacked revenue by plan tier

Funnel Chart

Signup to activation conversion flow

Bar Chart

Monthly new vs churned customers

Heatmap

Cohort retention matrix

Gauge Chart

NPS score and health metrics

Sparkline

Inline KPI trend indicators

Example Implementation

dashboard.tsx

import { LineChart, BarChart, Sparkline, GaugeChart } from "@chartts/react"

export function SaaSDashboard({ metrics }) {
  return (
    <div className="grid grid-cols-4 gap-4">
      <KPICard label="MRR" value="$128k" trend={metrics.mrrTrend} />
      <KPICard label="Customers" value="2,847" trend={metrics.custTrend} />
      <KPICard label="Churn" value="2.1%" trend={metrics.churnTrend} />
      <KPICard label="NPS" value="72" trend={metrics.npsTrend} />

      <div className="col-span-3 rounded-xl card p-6">
        <LineChart
          data={metrics.revenue}
          x="month"
          y={["mrr", "arr"]}
          className="h-72"
        />
      </div>
      <div className="col-span-1 rounded-xl card p-6">
        <GaugeChart value={72} max={100} label="NPS Score" />
      </div>
    </div>
  )
}

Why Chart.ts for SaaS Dashboard

Server-render charts in Next.js for instant dashboard loads

KPI sparklines under 1kb each

Dark mode toggle with Tailwind dark: variants

Export charts to SVG for investor reports

Real-time updates with WebSocket streaming

Accessible dashboards for compliance

Under 15kb total for all chart types

Start building your saas dashboard

Install Chart.ts and have your first chart rendering in 2 minutes.

$npm install @chartts/react

Get Started See Examples