Chart

Beautiful charts built with Recharts and themed for neobrutalism.

shadcn/ui docs →

Preview

Bar Chart - Multiple
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/chart.json

Dependencies: recharts

Usage

example.tsx
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  type ChartConfig,
} from "@/components/ui/chart"
import { Bar, BarChart, XAxis } from "recharts"

const config: ChartConfig = {
  views: { label: "Page Views", color: "#e11d48" },
}

const data = [
  { month: "Jan", views: 186 },
  { month: "Feb", views: 305 },
  { month: "Mar", views: 237 },
]

<ChartContainer config={config} className="h-[200px] w-full">
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <Bar dataKey="views" fill="var(--color-views)" radius={4} />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>
0