Starting your winter arc? 🥶 Get 25% off every plan and template with
WensityWensity

Chart

Recharts line, bar, area, pie, and radar views with themed tooltips, responsive sizing, and consistent axis styling.

chartgraphlinebarareapieradaranalyticsdataviz
Loading preview

Examples

Practical examples and common states for the same installable component.

Bar

Compares values across different categories.

examples/chart-bar.tsx
import { ChartBar } from "@/components/wensity/chart";


const data = [
  { channel: "Jan", desktop: 186, mobile: 120 },
  { channel: "Feb", desktop: 205, mobile: 138 },
  { channel: "Mar", desktop: 174, mobile: 151 },
];


const config = {
  desktop: { label: "Desktop" },
  mobile: { label: "Mobile" },
};


export default function Example() {
  return <ChartBar data={data} config={config} xKey="channel" />;
}

Area

Shows trends with emphasized data volume.

examples/chart-area.tsx
import { ChartArea } from "@/components/wensity/chart";


const data = [
  { month: "Jan", revenue: 4200, expenses: 2800 },
  { month: "Feb", revenue: 5100, expenses: 3100 },
];


const config = {
  revenue: { label: "Revenue" },
  expenses: { label: "Expenses" },
};


export default function Example() {
  return <ChartArea data={data} config={config} xKey="month" stacked />;
}

Pie

Displays proportional parts of a whole.

examples/chart-pie.tsx
import { ChartPie } from "@/components/wensity/chart";


const data = [
  { name: "Chrome", value: 612 },
  { name: "Safari", value: 218 },
  { name: "Firefox", value: 96 },
  { name: "Edge", value: 74 },
];


const config = {
  Chrome: { label: "Chrome" },
  Safari: { label: "Safari" },
  Firefox: { label: "Firefox" },
  Edge: { label: "Edge" },
};


export default function Example() {
  return <ChartPie data={data} config={config} height={260} />;
}

Radar

Compares multiple metrics across categories.

examples/chart-radar.tsx
import { ChartRadar } from "@/components/wensity/chart";


const data = [
  { metric: "Speed", team: 120, org: 98 },
  { metric: "Quality", team: 98, org: 90 },
  { metric: "Reliability", team: 110, org: 95 },
];


const config = {
  team: { label: "This team" },
  org: { label: "Org average" },
};


export default function Example() {
  return <ChartRadar data={data} config={config} xKey="metric" height={280} />;
}

Bar (interactive)

Toggleable series with running totals, matching shadcn's interactive bar chart.

examples/chart-bar-interactive.tsx
import { ChartBarInteractive } from "@/components/wensity/chart";


const data = [
  { date: "2024-04-01", desktop: 222, mobile: 150 },
  { date: "2024-04-02", desktop: 97, mobile: 180 },
  { date: "2024-04-03", desktop: 167, mobile: 120 },
  // ...30 days total (April 1 - April 30, 2024)
];


const config = {
  desktop: { label: "Desktop", color: "#3987e5" },
  mobile: { label: "Mobile", color: "#199e70" },
};


export default function Example() {
  return (
    <ChartBarInteractive
      data={data}
      config={config}
      xKey="date"
      title="Bar Chart - Interactive"
      description="Showing total visitors for the last 3 months"
      unitLabel="Page Views"
      dateFormat
    />
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add chart

Usage

Import Chart from @/components/wensity/chart and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { ChartLine } from "@/components/wensity/chart";


const data = [
  { month: "Jan", revenue: 4200, expenses: 2800 },
  { month: "Feb", revenue: 5100, expenses: 3100 },
  { month: "Mar", revenue: 4800, expenses: 2950 },
];


const config = {
  revenue: { label: "Revenue" },
  expenses: { label: "Expenses" },
};


export default function Example() {
  return <ChartLine data={data} config={config} xKey="month" />;
}

Props

PropTypeDefaultDescription
configChartConfig-Series keys mapped to labels and colours. Injected as --color-<key> variables. Required.
heightnumber280Chart height in pixels. The width is responsive.
childrenReact.ReactElement-The Recharts chart to wrap. Required.