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":[291,368,353,383,468,472,495,491,538,587,646,590]}]}'></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":[21966,21508,21482,27239,28899,27594]},{"name":"Expenses","data":[16802,15869,17491,18295,19611,20254],"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":[166,207,183,202,241,254,236,274,256,280,283,291],"color":"success"},{"name":"Lost","data":[-92,-94,-88,-90,-83,-82,-79,-70,-69,-61,-61,-57],"color":"danger"}]}'></div>