Component

Bar Chart

Simple bar chart displaying a single data series. Best for comparing discrete categories or time periods at a glance.

Usage

Use bar charts when comparing a single metric across categories or time. Keep to six or fewer bars for clarity.

Playground

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

Configure

Code

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

<Card>
  <CardHeader>
    <CardTitle>Bar Chart</CardTitle>
    <CardDescription>January - June 2024</CardDescription>
  </CardHeader>
  <CardContent>
    <ChartContainer config={chartConfig}>
      <BarChart accessibilityLayer data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={2} />
      </BarChart>
    </ChartContainer>
  </CardContent>
  <CardFooter className="flex-col items-start gap-2 text-sm">
    <div className="flex gap-2 leading-none font-medium">
      Trending up by 5.2% this month <TrendUp className="size-4" />
    </div>
    <div className="leading-none text-muted-foreground">
      Showing total visitors for the last 6 months
    </div>
  </CardFooter>
</Card>

Do

  • Use chart-* color tokens so the bars adapt to theme changes
  • Label the axis so the unit of measurement is always clear

Don't

  • Don't use a bar chart for continuous data, use a line chart instead
  • Don't show more than ~12 bars without adding a scroll or filter