Chart

npx shadcn@latest add https://ui.saasflare.io/r/chart.json

pnpm add @saasflare/ui

"use client"import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"import {    ChartContainer,    ChartTooltip,    ChartTooltipContent,    type ChartConfig,} from "@saasflare/ui/chart"const data = [    { month: "Jan", revenue: 18200 },    { month: "Feb", revenue: 21400 },    { month: "Mar", revenue: 19800 },    { month: "Apr", revenue: 26500 },    { month: "May", revenue: 31200 },    { month: "Jun", revenue: 34800 },]const config = {    revenue: { label: "Revenue", color: "var(--primary)" },} satisfies ChartConfig/** A themed bar chart of monthly recurring revenue. */export function Demo() {    return (        <div className="w-full max-w-md">            <ChartContainer config={config}>                <BarChart data={data}>                    <CartesianGrid vertical={false} />                    <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />                    <ChartTooltip content={<ChartTooltipContent />} />                    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={6} />                </BarChart>            </ChartContainer>        </div>    )}

"use client"import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"import {    ChartContainer,    ChartTooltip,    ChartTooltipContent,    type ChartConfig,} from "@saasflare/ui/chart"const data = [    { week: "W1", signups: 320 },    { week: "W2", signups: 410 },    { week: "W3", signups: 380 },    { week: "W4", signups: 540 },    { week: "W5", signups: 610 },    { week: "W6", signups: 720 },    { week: "W7", signups: 880 },]const config = {    signups: { label: "Signups", color: "var(--primary)" },} satisfies ChartConfig/** A filled area chart tracking weekly trial signups. */export function Demo() {    return (        <div className="w-full max-w-md">            <ChartContainer config={config}>                <AreaChart data={data}>                    <CartesianGrid vertical={false} />                    <XAxis dataKey="week" tickLine={false} axisLine={false} tickMargin={8} />                    <ChartTooltip content={<ChartTooltipContent />} />                    <Area                        dataKey="signups"                        type="natural"                        fill="var(--color-signups)"                        fillOpacity={0.2}                        stroke="var(--color-signups)"                    />                </AreaChart>            </ChartContainer>        </div>    )}

"use client"import { CartesianGrid, Line, LineChart, XAxis } from "recharts"import {    ChartContainer,    ChartLegend,    ChartLegendContent,    ChartTooltip,    ChartTooltipContent,    type ChartConfig,} from "@saasflare/ui/chart"const data = [    { month: "Jan", mrr: 18200, churn: 1400 },    { month: "Feb", mrr: 21400, churn: 1600 },    { month: "Mar", mrr: 24800, churn: 1500 },    { month: "Apr", mrr: 28100, churn: 1900 },    { month: "May", mrr: 33200, churn: 2100 },    { month: "Jun", mrr: 38600, churn: 2000 },]const config = {    mrr: { label: "MRR", color: "var(--primary)" },    churn: { label: "Churned", color: "oklch(0.62 0.21 25)" },} satisfies ChartConfig/** Two series — MRR vs churned revenue — with a themed legend. */export function Demo() {    return (        <div className="w-full max-w-md">            <ChartContainer config={config}>                <LineChart data={data}>                    <CartesianGrid vertical={false} />                    <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />                    <ChartTooltip content={<ChartTooltipContent />} />                    <ChartLegend content={<ChartLegendContent />} />                    <Line dataKey="mrr" type="monotone" stroke="var(--color-mrr)" strokeWidth={2} dot={false} />                    <Line dataKey="churn" type="monotone" stroke="var(--color-churn)" strokeWidth={2} dot={false} />                </LineChart>            </ChartContainer>        </div>    )}