Column
Values by period or category
Basic
Code
<div class="chart" role="img" aria-label="Basic" style="--chart-h: 300px" data-chart='{"type":"column","labels":["Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"],"series":[{"name":"Orders","data":[304,334,380,377,470,507,509,504,575,524,648,689]}]}'></div>Grouped
The last six months
Code
<div class="chart" role="img" aria-label="Grouped" style="--chart-h: 300px" data-chart='{"type":"column","labels":["May","Jun","Jul","Aug","Sep","Oct"],"legend":true,"series":[{"name":"Income","data":[21988,20583,25282,26189,29256,25638]},{"name":"Expenses","data":[16994,17553,18915,16558,20085,20351],"color":"2"}],"format":"money"}'></div>Stacked
The last seven days
Code
<div class="chart" role="img" aria-label="Stacked" style="--chart-h: 300px" data-chart='{"type":"column","stacked":true,"labels":["Thu","Fri","Sat","Sun","Mon","Tue","Wed"],"legend":true,"series":[{"name":"Email","data":[64,59,22,18,42,51,38]},{"name":"Chat","data":[52,47,30,24,38,44,40],"color":"info"},{"name":"Phone","data":[18,14,4,2,12,15,10],"color":"success"}]}'></div>Positive and negative
Code
<div class="chart" role="img" aria-label="Positive and negative" style="--chart-h: 300px" data-chart='{"type":"column","stacked":true,"radius":4,"labels":["Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"],"legend":true,"series":[{"name":"Gained","data":[179,199,215,205,208,216,274,238,293,289,321,281],"color":"success"},{"name":"Lost","data":[-97,-82,-85,-77,-87,-72,-76,-75,-67,-70,-61,-57],"color":"danger"}]}'></div>