Bar Chart with Trends

Default bar chart component with clean design and trend indicators. Built for React applications requiring simple data visualization with Next.js and TypeScript.

Recharts

Loading component...

"use client"import { TrendingUp } from "lucide-react"import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A bar chart"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 ChartConfigexport function ChartBarDefault() {  return (    <div className="w-full h-full flex flex-col p-4">      <div className="flex flex-col gap-1 pb-4 mb-4 border-b">        <h3 className="text-lg font-semibold">Bar Chart</h3>        <p className="text-sm text-muted-foreground">January - June 2024</p>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer config={chartConfig} className="h-[250px] w-full">          <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={8} />          </BarChart>        </ChartContainer>      </div>      <div className="flex flex-col items-start gap-2 text-sm pt-4 border-t">        <div className="flex gap-2 leading-none font-medium">          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />        </div>        <div className="text-muted-foreground leading-none">          Showing total visitors for the last 6 months        </div>      </div>    </div>  )}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/bar-chart-02.json

npx shadcn@latest add https://www.shadcn.io/registry/bar-chart-02.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/bar-chart-02.json

bunx shadcn@latest add https://www.shadcn.io/registry/bar-chart-02.json

Features

Clean design with minimal visual elements and focused data presentation
Rounded bars with 8px radius for modern aesthetic appeal
Trend indicators displaying percentage growth with visual icons
Hidden labels on tooltip for streamlined data display
TypeScript support with complete type definitions for chart configuration
shadcn/ui integration using Chart components with clean styling

Use Cases

This free open source React component works well for:

Simple dashboards - Applications requiring straightforward data visualization built with Next.js
Business reports - Clean charts for professional presentations using TypeScript and Tailwind CSS
Monthly summaries - Period-based data display with trend analysis
Performance tracking - Basic metrics visualization with growth indicators

API Reference

ChartBarDefault

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the card container

Chart Configuration

Single data series configuration:

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

Footer Content

Includes trend information and data context:

<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 <TrendingUp className="h-4 w-4" />
  </div>
  <div className="text-muted-foreground leading-none">
    Showing total visitors for the last 6 months
  </div>
</CardFooter>

Implementation Notes

Bars feature 8px radius for rounded corners and modern appearance
Tooltip hides labels for cleaner data presentation
Footer provides contextual information about trends and time periods
CartesianGrid excludes vertical lines for cleaner horizontal emphasis
Month names are abbreviated to 3 characters for compact display
Perfect for simple data visualization requiring minimal visual complexity

Bar Chart with Trends

Reactbar-chart-02

On this page