Chart - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation/chart

Usage

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Examples

Area Gradient

Area chart with gradient fill.

Bar Multiple

Multiple series bar chart.

Bar Interactive

Interactive bar with tabs.

Pie Donut

Donut chart with center text.

Radial

Radial stacked chart.

API Reference

Prop	Type	Default	Description
`config`*	`ChartConfig`	—	Chart configuration object.

Area Chart - Interactive

Showing total visitors for the selected period

Installation

pnpm dlx shadcn@latest add @saturation/chart

Usage

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Examples

Area Gradient

Revenue vs Expenses

Monthly financial overview with gradient fill

Area chart with gradient fill.

Bar Multiple

Desktop vs Mobile

Visitor count by platform over the last 6 months

Multiple series bar chart.

Bar Interactive

Page Analytics

Daily views and clicks for the last 12 days

Interactive bar with tabs.

Pie Donut

Department Budget

Budget allocation across production departments

Camera

Electric

Grip

Sound

Art

Donut chart with center text.

Radial

Budget Utilization

Percentage of budget spent by department

Radial stacked chart.

API Reference

Prop	Type	Default	Description
`config`*	`ChartConfig`	—	Chart configuration object.