✨ Working with PDFs, images or videos? Discover 145+ free web apps built for everyday tasks
Wensity

Chart

A Recharts-backed chart primitive with Line, Bar, Area, Pie, and Radar variants, a CVD-validated categorical palette, and a shared tooltip/legend.

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
    />
  );
}