Bar Chart

<BarChart />TailwindCSS Modules

Visualize trends and comparisons in dashboards with responsive bar charts.

InstallationColoxo CLI
npx coloxo add bar-chart --style coloxo-css
ES Module ImportPlayground / npm package
import { BarChart } from '@coloxo/ui';

Compare categories. Follow trends. Build clearer dashboards.

1. Bar chart examples

Explore simple, grouped, horizontal, and stacked views of the same visitor data.

Visitors across the first half of the year

Bar Chart - Default

Desktop visitors, January-June

Bar Chart - DefaultBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.076.25152.5228.75305JanuaryFebruaryMarchAprilMayJune
  • Desktop
Bar Chart - Default — data
CategoryDesktop
January186
February305
March237
April73
May209
June214

Bar Chart - Multiple

Compare desktop and mobile visitors

Bar Chart - MultipleBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.076.25152.5228.75305JanuaryFebruaryMarchAprilMayJune
  • Desktop
  • Mobile
Bar Chart - Multiple — data
CategoryDesktopMobile
January18680
February305200
March237120
April73190
May209130
June214140

Bar Chart - Horizontal

Compare categories side by side

Bar Chart - HorizontalBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.076.25152.5228.75305JanuaryFebruaryMarchAprilMayJune
  • Desktop
Bar Chart - Horizontal — data
CategoryDesktop
January186
February305
March237
April73
May209
June214

Bar Chart - Stacked

See each channel's contribution

Bar Chart - StackedBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.0126.25252.5378.75505JanuaryFebruaryMarchAprilMayJune
  • Desktop
  • Mobile
Bar Chart - Stacked — data
CategoryDesktopMobile
January18680
February305200
March237120
April73190
May209130
June214140

2. Interactive configurator

Width100%
Height280px

Width is relative to the preview. Height sets the SVG reference height; the chart scales proportionally to fit.

Visual Render Canvas
Monthly visitorsBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.076.25152.5228.75305JanuaryFebruaryMarchAprilMayJune
  • Desktop
  • Mobile
Monthly visitors — data
CategoryDesktopMobile
January18680
February305200
March237120
April73190
May209130
June214140
tsx
<BarChart  label="Monthly visitors"  data={data}  series={series}  color="brand"  layout="vertical"  stacked={false}  showGrid={true}  showLegend={true}  height={280}  style={{ width: "100%" }}/>

3. Enterprise layout compositions

Combine charts with summary metrics and context for revenue reviews and resource planning. All figures below are sample data.

Revenue performance

Actual revenue against monthly targets · January–April

Revenue to date
$205k
Target to date
$198k
Above target
3.5%
Monthly revenue versus target in thousands of dollarsBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.$0k$15.25k$30.5k$45.75k$61kJanuaryFebruaryMarchApril
  • Actual revenue
  • Target revenue
Monthly revenue versus target in thousands of dollars — data
CategoryActual revenueTarget revenue
January$42k$45k
February$53k$48k
March$49k$50k
April$61k$55k

Team capacity

Weekly planning · 40 hours allocated per team

Available capacity
36hrs
Planned and available weekly hours by teamBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.0h10h20h30h40hEngineeringDesignOperations
  • Planned hours
  • Available hours
Planned and available weekly hours by team — data
CategoryPlanned hoursAvailable hours
Engineering32h8h
Design24h16h
Operations28h12h
Revenue dashboard composition
import { BarChart, Card, Statistic } from "@coloxo/ui";const data = [  {    "label": "January",    "actual": 42,    "target": 45  },  {    "label": "February",    "actual": 53,    "target": 48  },  {    "label": "March",    "actual": 49,    "target": 50  },  {    "label": "April",    "actual": 61,    "target": 55  }];<Card variant="default" className="p-6">  <Statistic label="Revenue to date" value="205" prefix="$" suffix="k" />  <BarChart    label="Monthly revenue versus target"    data={data}    series={[      { key: "actual", label: "Actual revenue" },      { key: "target", label: "Target revenue" },    ]}    valueFormatter={(value) => `$${value}k`}  /></Card>

4. Actions & composition

Pair a chart with period filters, CSV export, and a visible data table. Every action below uses the selected period.

Visitor analytics

Desktop and mobile acquisition · Sample data

Total visitors in selected period
2,084
Visitor analytics for selected reporting periodBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.076.25152.5228.75305JanuaryFebruaryMarchAprilMayJune
  • Desktop
  • Mobile
Visitor analytics for selected reporting period — data
CategoryDesktopMobile
January18680
February305200
March237120
April73190
May209130
June214140

5. Dark theme

Monthly visitors in dark themeBar chart. Values are also provided in the accompanying data table. Focus a bar to read its value.076.25152.5228.75305JanuaryFebruaryMarchAprilMayJune
  • Desktop
  • Mobile
Monthly visitors in dark theme — data
CategoryDesktopMobile
January18680
February305200
March237120
April73190
May209130
June214140

Accessibility

Each chart has an accessible name, keyboard-focusable bars, and a screen-reader data table. Hover or focus bars to inspect values.

Hover or focus a bar to see its category, series, and formatted value in the shared ChartTooltip. Press Escape to dismiss it. Use descriptive series labels and distinguish series through the legend. Positive and negative values share a zero baseline. Empty datasets display a clear empty state.

Props

NameTypeDefaultDescription
dataBarChartDatum[]—Category label and numeric values keyed by series. Non-finite or missing values render as zero.
seriesBarChartSeries[]—Unique key, display label, and optional CSS color for each series.
color"brand" | "gray" | "error" | "warning" | "success" | "blue" | "indigo" | "purple" | "pink" | "orange"brandPrimary series color. The secondary series mixes the primary with 45% white. Per-series CSS colors override the palette.
labelstring—Required accessible chart name.
layout"vertical" | "horizontal"verticalDirection of the bars.
stackedbooleanfalseStack series within each category. Supports positive and negative values.
heightnumber280SVG viewBox height; the chart scales to fit its container. Minimum 160.
showLegend / showGridbooleantrueDisplay the series legend and value grid.
valueFormatter(value: number) => string—Format axis labels, bar descriptions, and accessible data.
className / stylestring / CSSProperties—Customize the chart container.