<BarChart aspectRatio="4 / 1" barGap={0.1} data={dailyData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} xDataKey="day">
<Grid horizontal />
<Bar dataKey="value" lineCap="butt" />
<BarXAxis maxLabels={8} />
<ChartTooltip />
</BarChart>
const dailyData = Array.from({ length: 90 }, (_, i) => {
const date = new Date(2024, 0, 1);
date.setDate(date.getDate() + i);
return {
day: date.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
value: Math.floor(50 + Math.sin(i / 7) * 30 + ((i * 7) % 37) - 18),
};
});<BarChart data={chartData} xDataKey="month">
<Grid horizontal />
<Bar dataKey="orders" showValue />
<BarXAxis />
<ChartTooltip />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Grid horizontal />
<Bar dataKey="desktop" lineCap="round" />
<BarXAxis />
<ChartTooltip />
</BarChart>// Shortcut for <BarChart status="loading" />
<BarChartLoading /><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Grid horizontal />
<BarDepthBack dataKey="desktop" color="var(--chart-1)" />
<Bar dataKey="desktop" fill="var(--chart-1)" perspective />
<BarDepthFront dataKey="desktop" />
<BarXAxis />
<ChartTooltip showCrosshair={false} showDots={false} />
<BarLineIndicator data={chartData} valueKey="desktop" xKey="month" />
</BarChart><BarDepthProvider
segmentsAccessor={(d) => [
{ value: d.desktop, color: "var(--chart-1)" },
{ value: d.mobile, color: "var(--chart-3)" },
]}
>
<BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month" stacked>
<Grid horizontal />
<BarDepthBack dataKey="desktop" />
<Bar dataKey="desktop" fill="var(--chart-1)" perspective />
<Bar dataKey="mobile" fill="var(--chart-3)" perspective />
<BarDepthFront dataKey="desktop" />
<BarXAxis />
<ChartTooltip showCrosshair={false} showDots={false} />
</BarChart>
</BarDepthProvider><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Grid horizontal />
<Bar dataKey="desktop" fill="var(--chart-1)" lineCap="round" />
<Bar dataKey="mobile" fill="var(--chart-3)" lineCap="round" />
<BarXAxis />
<ChartTooltip />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month" stacked stackGap={3}>
<Grid horizontal />
<Bar dataKey="desktop" fill="var(--chart-1)" lineCap="butt" stackGap={3} />
<Bar dataKey="mobile" fill="var(--chart-3)" lineCap="butt" stackGap={3} />
<BarXAxis />
<ChartTooltip />
</BarChart><BarChart
data={chartData}
xDataKey="browser"
orientation="horizontal"
margin={{ top: 8, right: 8, bottom: 40, left: 80 }}
aspectRatio="4 / 3"
>
<Grid horizontal={false} vertical fadeVertical />
<Bar dataKey="users" lineCap={4} />
<BarYAxis />
<ChartTooltip showCrosshair={false} />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Grid horizontal highlightRowValues={[0]} />
<Bar dataKey="profit" lineCap={4} />
<BarXAxis />
<ChartTooltip />
</BarChart>
const chartData = [
{ month: "Jan", profit: 4200 },
{ month: "Feb", profit: -1800 },
{ month: "Mar", profit: 2600 },
{ month: "Apr", profit: -3400 },
{ month: "May", profit: 5100 },
{ month: "Jun", profit: -900 },
{ month: "Jul", profit: 3800 },
{ month: "Aug", profit: 6200 },
];<BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={dailyData} xDataKey="day" barGap={0.1}>
<Grid horizontal />
<Bar dataKey="value" lineCap="butt" />
<BarXAxis maxLabels={6} />
<ChartTooltip />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<LinearGradient
from="hsl(217, 91%, 60%)"
id="barGradient"
to="hsl(280, 87%, 65%)"
/>
<Grid horizontal />
<Bar
dataKey="revenue"
fill="url(#barGradient)"
lineCap={4}
stroke="hsl(217, 91%, 60%)"
/>
<BarXAxis />
<ChartTooltip />
</BarChart><BarChart
data={chartData}
xDataKey="month"
margin={{ top: 8, right: 8, bottom: 40, left: 8 }}
squareSnap={{ squareGap: 3, groupGap: 4 }}
>
<PatternLines
id="shape-track-pattern"
height={6}
width={6}
orientation={["diagonal"]}
stroke="var(--chart-grid)"
strokeWidth={1}
/>
<BarColumnTrack
fill="url(#shape-track-pattern)"
opacity={0.65}
squareGap={3}
squareRadius={0.25}
groupGap={4}
/>
<PatternLines
id="shape-desktop-pattern"
height={6}
width={6}
orientation={["diagonal"]}
stroke="var(--chart-5)"
strokeWidth={1}
/>
<BarSquares
dataKey="desktop"
fill="url(#shape-desktop-pattern)"
squareGap={3}
squareRadius={0.25}
groupGap={4}
stroke="var(--chart-5)"
/>
<BarSquares
dataKey="mobile"
fill="var(--chart-1)"
useGradient
gradientStops={[
{ offset: 0, color: "var(--chart-1)" },
{ offset: 25, color: "var(--chart-2)" },
{ offset: 50, color: "var(--chart-3)" },
{ offset: 75, color: "var(--chart-4)" },
{ offset: 100, color: "var(--chart-5)" },
]}
squareGap={3}
squareRadius={0.25}
groupGap={4}
stroke="var(--chart-5)"
/>
<BarXAxis />
<ChartTooltip
showCrosshair={false}
dotVariant="ring"
dotScale={1.05}
dotColor="oklch(1 0.002 186.385 / 0.7)"
/>
</BarChart><BarChart
data={chartData}
xDataKey="month"
margin={{ top: 8, right: 8, bottom: 40, left: 8 }}
squareSnap={{ squareGap: 3, groupGap: 4 }}
>
<PatternLines
id="shape-squircle-track"
height={6}
width={6}
orientation={["diagonal"]}
stroke="var(--chart-grid)"
strokeWidth={1}
/>
<BarColumnTrack
fill="url(#shape-squircle-track)"
opacity={0.65}
squareGap={3}
squareRadius={0.5}
groupGap={4}
/>
<PatternLines
id="shape-squircle-desktop"
height={6}
width={6}
orientation={["diagonal"]}
stroke="var(--chart-5)"
strokeWidth={1}
/>
<BarSquares
dataKey="desktop"
fill="url(#shape-squircle-desktop)"
squareGap={3}
squareRadius={0.5}
groupGap={4}
stroke="var(--chart-5)"
/>
<BarSquares
dataKey="mobile"
fill="var(--chart-1)"
squareGap={3}
squareRadius={0.5}
groupGap={4}
/>
<BarXAxis />
<ChartTooltip
showCrosshair={false}
dotVariant="ring"
dotRadiusFraction={0.5}
dotStrokeWidth={1}
dotColor="oklch(1 0.002 186.385 / 0.7)"
/>
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<PatternLines
height={8}
id="barPattern"
orientation={["diagonal"]}
stroke="var(--chart-1)"
strokeWidth={2}
width={8}
/>
<Grid horizontal />
<Bar
dataKey="revenue"
fill="url(#barPattern)"
lineCap={4}
stroke="var(--chart-1)"
/>
<BarXAxis />
<ChartTooltip />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month" barGap={0}>
<LinearGradient
from="var(--chart-3)"
id="noGapGradient"
to="transparent"
/>
<Grid horizontal />
<Bar
dataKey="revenue"
fill="url(#noGapGradient)"
lineCap="butt"
stroke="var(--chart-3)"
/>
<BarXAxis />
<ChartTooltip showCrosshair={false} showDots={false} />
<BarLineIndicator data={chartData} valueKey="revenue" xKey="month" />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Grid horizontal />
<Bar dataKey="revenue" lineCap="round" />
<BarXAxis />
<ChartTooltip
rows={(point) => [
{
color: "var(--chart-line-primary)",
label: "Revenue",
value: `$${(point.revenue as number)?.toLocaleString()}`,
},
]}
/>
</BarChart><BarChart data={chartData} xDataKey="month" margin={{ top: 8, right: 8, bottom: 40, left: 56 }}>
<Grid horizontal />
<Bar dataKey="desktop" lineCap="round" />
<Bar dataKey="mobile" fill="var(--chart-3)" lineCap="round" />
<YAxis yAxisId="left" />
<BarXAxis />
<ChartTooltip />
</BarChart><BarChart data={chartData} xDataKey="month" margin={{ top: 8, right: 56, bottom: 40, left: 56 }}>
<Grid horizontal />
<Bar dataKey="desktop" yAxisId="left" lineCap="round" />
<Bar dataKey="mobile" yAxisId="right" fill="var(--chart-3)" lineCap="round" />
<YAxis yAxisId="left" />
<YAxis yAxisId="right" orientation="right" />
<BarXAxis />
<ChartTooltip />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Background />
<Bar dataKey="desktop" lineCap="round" />
<BarXAxis />
<ChartTooltip showCrosshair={false} />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Background pattern="dots" opacity={0.85} />
<Bar dataKey="desktop" lineCap="round" />
<BarXAxis />
<ChartTooltip showCrosshair={false} />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<ReferenceArea y1={4200} y2={5000} strokeStyle="dashed" showMarkers />
<Bar dataKey="desktop" lineCap="round" />
<BarXAxis />
<ChartTooltip showCrosshair={false} />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<ReferenceArea
y1={4200}
y2={5000}
pattern="diagonal"
patternColor="var(--chart-foreground-muted)"
axisLabelColor="var(--chart-1)"
fillOpacity={0.85}
/>
<Bar dataKey="desktop" lineCap="round" />
<BarXAxis />
<ChartTooltip showCrosshair={false} />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Grid horizontal />
<Bar dataKey="desktop" lineCap="round" />
<TrendLine dataKey="desktop" stroke="var(--chart-1)" />
<BarXAxis />
<ChartTooltip showCrosshair={false} />
</BarChart><BarChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData} xDataKey="month">
<Grid horizontal />
<Bar dataKey="desktop" lineCap="round" />
<TrendLine
dataKey="desktop"
strokeStyle="gradient"
gradientStart="var(--chart-3)"
gradientEnd="var(--chart-1)"
strokeWidth={2.5}
fadeEdges
/>
<BarXAxis />
<ChartTooltip showCrosshair={false} />
</BarChart><BarChart
data={chartData}
xDataKey="browser"
orientation="horizontal"
margin={{ top: 8, right: 8, bottom: 40, left: 80 }}
aspectRatio="4 / 3"
>
<Grid horizontal={false} vertical fadeVertical />
<Bar dataKey="users" lineCap={4} />
<TrendLine dataKey="users" stroke="var(--chart-1)" />
<BarYAxis />
<ChartTooltip showCrosshair={false} />
</BarChart>