CHARTS

BarChart

Categorical comparisons with explicit values, grouped series, and readable labels.

CATEGORY FIRST

Compare what matters

Use one Signal for a simple ranking or series when each category has multiple measures.

CATEGORY DATA

Make a ranking scannable

Each category supplies label and value. showValues keeps the number visible while grouped bars preserve the categorical axis.

Loading
No data available
dowe
type ChartSlice
  label:string
  value:number
  color:string

signal channels type:ChartSlice[] value:[{ label:"Direct" value:46 color:"primary" }]

BarChart data:channels variant:"soft" scheme:"surface" size:"lg" palette:"ocean" grouped:true showValues:true barRadius:8

GROUPED SERIES

Layer a quarterly comparison

Bar series contain a name and nested categorical data. Choose grouped for side-by-side comparison or stacked when the total matters more than each bar height.

Loading
No data available
Loading
No data available
dowe
type BarSeries
  name:string
  data:ChartSlice[]
signal quarterly type:BarSeries[] value:[{ name:"New business" data:[{ label:"Q1" value:24 }] }]

BarChart series:quarterly variant:"outlined" scheme:"primary" palette:"forest" grouped:true showValues:true legendPosition:"top"
BarChart series:quarterly variant:"soft" scheme:"surface" palette:"sunset" stacked:true showValues:true legendPosition:"top"

STATES AND GRID

Tune emphasis without losing context

hideGrid is useful for compact KPI panels. Keep axes and labels when the chart is the primary evidence for a decision.

Loading
No data available
Loading
No data available
Loading
No channel data
dowe
BarChart data:channels variant:"solid" scheme:"surface" hideGrid:true showValues:true
BarChart data:emptyBars variant:"outlined" scheme:"warning" emptyLabel:"No channel data"

API

Props

BarChart also accepts applicable common identity, spacing, sizing, visibility, radius, border, and accessibility props.

Prop
Type
Default

No data

There are no records to display