Bar Chart

Name: Boreal UI
Author: Davin Chiupka

The BarChart component visualizes labeled numeric values as accessible vertical bars.

Usage & Examples

Monthly Volume

Monthly volume

monthly-volume.tsx

const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart data={chartData} label="Monthly volume" />

Visual variants

Themes

primary

Monthly volume

secondary

Monthly volume

tertiary

Monthly volume

quaternary

Monthly volume

States

success

Monthly volume

warning

Monthly volume

error

Monthly volume

info

Monthly volume

visual-variants.tsx

// Themes
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart theme="primary" data={chartData} label="Monthly volume" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart theme="secondary" data={chartData} label="Monthly volume" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart theme="tertiary" data={chartData} label="Monthly volume" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart theme="quaternary" data={chartData} label="Monthly volume" />

// States
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart state="success" data={chartData} label="Monthly volume" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart state="warning" data={chartData} label="Monthly volume" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart state="error" data={chartData} label="Monthly volume" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart state="info" data={chartData} label="Monthly volume" />

Interaction states

Monthly volume

interaction-states.tsx

// Loading
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ]; 
  
  
  <BarChart loading data={chartData} label="Monthly volume" />

Props API

Bar Chart props API
				Default	Description
`aria-label`	`string`	No	aria	`—`	Accessible label for the chart graphic.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`data`	`ChartDatum[]`	Yes	props	`—`	Labelled values rendered as vertical bars.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`gap`	`number`	No	props	`8`	Gap between bars in SVG units.
`height`	`number`	No	props	`180`	Height of the SVG viewport.
`label`	`ReactNode`	No	props	`—`	Visible chart label.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`padding`	`number`	No	props	`24`	Inner SVG padding.
`showGrid`	`boolean`	No	props	`true`	Whether to render horizontal guide lines.
`showLabels`	`boolean`	No	props	`true`	Whether to render category labels below bars.
`state`	`StateType`	No	styling	`—`	Visual state class used for styling.