Vitreo
Charts

Bar

Comparisons with long labels

Horizontal

Code
<div class="chart" role="img" aria-label="Horizontal" style="--chart-h: 300px" data-chart='{"type":"bar","labels":["Organic search","Direct","Social","Referral","Email"],"series":[{"name":"Sessions","data":[98420,61250,38610,27930,22100]}],"format":"compact","barWidth":16}'></div>

Grouped

Code
<div class="chart" role="img" aria-label="Grouped" style="--chart-h: 300px" data-chart='{"type":"bar","labels":["North","South","East","West"],"legend":true,"series":[{"name":"2025","data":[420,310,280,360],"color":"2"},{"name":"2026","data":[510,340,330,410]}],"barWidth":12}'></div>

Stacked

Code
<div class="chart" role="img" aria-label="Stacked" style="--chart-h: 300px" data-chart='{"type":"bar","stacked":true,"labels":["Design","Engineering","Sales","Support"],"legend":true,"series":[{"name":"Full time","data":[24,86,41,28]},{"name":"Part time","data":[6,12,9,10],"color":"info"},{"name":"Contract","data":[4,18,3,2],"color":"success"}],"barWidth":18}'></div>

Ranked

Sorted, with the top one called out

Code
<div class="chart" role="img" aria-label="Ranked" style="--chart-h: 300px" data-chart='{"type":"bar","labels":["Aero Wireless Headphones","Pulse Smart Watch","Lumen Desk Lamp","Nimbus Backpack","Orbit Bluetooth Speaker","Vista 4K Monitor"],"series":[{"name":"Units","data":[1840,1320,1110,960,740,520]}],"barWidth":14}'></div>