0|

Bar Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Simple static & beautifully designed bar charts

apidocgithub
Basic Chart
layout='horizontal'

Installation

pnpm dlx shadcn@latest add @beecharts/bar-chart

Usage

The bar chart is composible. <BeeBarChart> is the container, and you compose only the parts you need — <Grid>, <XAxis>, <YAxis>, <Legend>, <Tooltip>, and one or more <Bar> — as its children. Each <Bar> carries its own variant, radius, glowing, bufferBar, and isClickable, so a single chart can mix fill styles and make only some series interactive.

import {
  BeeBarChart,
  Bar,
  XAxis,
  YAxis,
  Grid,
  Tooltip,
  Legend,
} from "@/components/beecharts/charts/bar-chart";
const chartConfig = {
  desktop: {
    label: "Desktop",
    colors: { light: ["#047857"], dark: ["#10b981"] },
  },
  mobile: {
    label: "Mobile",
    colors: { light: ["#be123c"], dark: ["#f43f5e"] },
  },
} satisfies ChartConfig;
 
<BeeBarChart data={data} config={chartConfig} xDataKey="month" barRadius={8}>
  <Grid />
  <XAxis dataKey="month" />
  <Legend />
  <Tooltip />
  <Bar dataKey="desktop" />
  <Bar dataKey="mobile" />
</BeeBarChart>

Bar, line, and composed basic previews share the same twelve-month desktop / mobile dataset, color tokens, and 8px rounded bar tops (barRadius on the chart root).

Loading State

isLoading='true'

More examples

Below are bar chart examples with different stackType, layout, and <Bar variant /> fills.

Stack types

stackType='stacked'
stackType='percent'

Bar variants

variant='hatched'
variant='stripped'

3D bar

Isometric bars with beveled faces and a highlighted peak — see Bar blocks for the full block.

Isometric 3D bar

Histogram

Bin numeric samples with binForHistogram() from Chart recipes, then render with variant="histogram" on <BeeBarChart /> (touching bins, square corners).

histogram
loading

Bullet chart

Horizontal range bands plus actual and target markers — use prepareBulletRow() and layout="horizontal".

bullet

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

BeeBarChart

The root container. It owns the data, the shared selection state, the loading skeleton, and the optional brush. Everything visual is composed as its children.

PropTypeDefaultDescription
data*TData[]–

Data used to display the chart. An array of objects where each object represents a data point (TData extends Record<string, unknown>).

config*Record<string, ChartConfig[string]>–

Configuration object that defines the chart's series. Each key should match a data key in your data array, with a corresponding color or color array.

children*ReactNode–

The composed chart parts — <Grid />, <XAxis />, <YAxis />, <Legend />, <Tooltip />, and one or more <Bar />.

classNamestring–

Additional CSS classes to apply to the chart container.

stackTypedefault|stacked|percent"default"

Controls how multiple bars combine. "default" renders bars side by side, "stacked" stacks them on top of each other, and "percent" normalizes them to show percentage distribution.

layoutvertical|horizontal"vertical"

The orientation of the bars. "vertical" displays bars vertically, "horizontal" displays bars horizontally — in which case the <YAxis /> shows categories and the <XAxis /> shows values.

barRadiusnumber2

The default corner radius for every <Bar />, in pixels. Each <Bar /> may override it locally with its own radius prop.

animationTypenone|left-to-right|right-to-left|center-out|edges-in"left-to-right"

Order in which bars grow into view, inherited by every <Bar />. Each bar grows from its baseline (bottom for vertical layout, left for horizontal). "none" disables it — devices with the OS reduce-motion preference fall back to "none" automatically.

barGapnumber–

The gap between bars in the same category (when using multiple series).

barCategoryGapnumber–

The gap between different categories of bars.

backgroundVariantBackgroundVariant–

Background pattern variant to display behind the chart.

defaultSelectedDataKeystring | nullnull

The data key that should be selected by default.

onSelectionChange(selectedDataKey: string | null) => void–

Callback fired when a series is selected or deselected — by clicking a clickable <Bar /> or <Legend /> entry. Receives the selected data key, or null when deselected.

isLoadingbooleanfalse

Shows a loading skeleton animation with a shimmer effect when data is being fetched.

loadingBarsnumber12

Number of bars to display in the loading skeleton.

showBrushbooleanfalse

When enabled, displays a brush control below the chart for selecting and zooming into a range of data.

xDataKeykeyof TData & string–

The data key used for the x-axis. Only needed by the brush footer — the axis itself reads its key from <XAxis dataKey="…" />.

brushHeightnumber–

The height of the brush preview area in pixels.

brushFormatLabel(value: unknown, index: number) => string–

Custom formatter for the brush axis labels.

onBrushChange(range: BeeBrushRange) => void–

Callback invoked when the user changes the brush selection range.

chartPropsComponentProps<typeof BarChart>–

Additional props forwarded to the underlying Recharts BarChart component. Read the Recharts BarChart documentation for available props.

Bar

A single bar series. Each <Bar /> is self-contained and generates its own gradient/pattern definitions, so a chart can hold any number of bars — each with its own variant, radius, glow, and clickability.

PropTypeDefaultDescription
dataKey*string–

The series key. Must exist on both the data rows and the chart config.

variantdefault|hatched|duotone|duotone-reverse|gradient|stripped"default"

The visual style of the bar fill. Applies to this bar only.

radiusnumber–

The corner radius of this bar, in pixels. Falls back to the chart's barRadius when omitted.

animationTypenone|left-to-right|right-to-left|center-out|edges-in–

The grow-in order for this bar series. Falls back to the chart's animationType when omitted.

isClickablebooleanfalse

Lets this bar be selected by clicking it. When any bar is selected, unselected bars become semi-transparent.

enableHoverHighlightbooleanfalse

When enabled, hovering over a bar dims this bar while another is hovered, making it easier to focus on specific data points.

glowingbooleanfalse

Applies a soft outer glow to this bar series.

bufferBarbooleanfalse

When enabled, renders this series' last data point with a diagonal lines (hatched) pattern while the rest stay solid. Useful for indicating projected or incomplete data at the end of a series.

barPropsComponentProps<typeof Bar>–

Escape hatch for raw props forwarded to the underlying Recharts Bar component.

XAxis and YAxis

The category and value axes. Both ship with the chart's flat default styling and forward every Recharts axis prop, so dataKey, tickFormatter, tickMargin, etc. pass straight through. They are hidden automatically while the chart is loading, and each resolves its axis type from the chart layout — categorical or numeric — unless you set type explicitly.

PropTypeDefaultDescription
dataKeystring–

The data key for the axis values.

…axisProps––

Every other Recharts XAxis / YAxis prop is forwarded as-is. Read the Recharts XAxis and Recharts YAxis documentation for available props.

Grid

The background grid lines. Defaults to dashed lines aligned to the value axis based on the chart layout, and forwards every Recharts CartesianGrid prop.

PropTypeDefaultDescription
…gridProps––

Every Recharts CartesianGrid prop is forwarded as-is. Read the Recharts CartesianGrid documentation for available props.

Tooltip

The hover tooltip. It reads the chart's selection state so its content dims unselected series.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

The visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

defaultIndexnumber–

When set, the tooltip is visible by default at the specified data point index.

Legend

The series legend. When isClickable is set, each entry toggles selection of its series.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

The visual style of the legend indicators.

alignleft|center|right"right"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"top"

Vertical placement of the legend.

isClickablebooleanfalse

Lets each legend entry toggle selection of its series.

Did you like the content?