CATEGORY FIRST
Compare what matters
Use one Signal for a simple ranking or series when each category has multiple measures.
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.
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:8GROUPED 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.
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.
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 dataThere are no records to display | ||