Area
Volume over time
Gradient area
Code
<div class="chart" role="img" aria-label="Gradient area" style="--chart-h: 300px" data-chart='{"type":"area","labels":["Sep 29","Sep 30","Oct 1","Oct 2","Oct 3","Oct 4","Oct 5","Oct 6","Oct 7","Oct 8","Oct 9","Oct 10","Oct 11","Oct 12","Oct 13","Oct 14","Oct 15","Oct 16","Oct 17","Oct 18","Oct 19","Oct 20","Oct 21","Oct 22","Oct 23","Oct 24","Oct 25","Oct 26","Oct 27","Oct 28"],"format":"money","series":[{"name":"Revenue","data":[11361,13408,11458,13427,12819,12727,14191,15291,13878,14631,16388,16555,16137,17525,14713,17428,16555,15589,18201,18212,17749,19682,17601,17988,20505,18809,19543,19785,19202,22495]}]}'></div>Stacked
Parts that add up
Code
<div class="chart" role="img" aria-label="Stacked" style="--chart-h: 300px" data-chart='{"type":"area","stacked":true,"legend":true,"labels":["Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"],"series":[{"name":"Desktop","data":[3190,3523,3851,4014,3955,4347,4331,4243,4258,5196,5293,4714]},{"name":"Mobile","data":[2522,2587,2898,2780,3384,3464,3355,3801,4026,3993,4584,4385],"color":"info"},{"name":"Tablet","data":[409,400,428,509,559,574,620,639,696,702,837,847],"color":"success"}]}'></div>Against last period
Code
<div class="chart" role="img" aria-label="Against last period" style="--chart-h: 280px" data-chart='{"type":"area","labels":["Sep 29","Sep 30","Oct 1","Oct 2","Oct 3","Oct 4","Oct 5","Oct 6","Oct 7","Oct 8","Oct 9","Oct 10","Oct 11","Oct 12","Oct 13","Oct 14","Oct 15","Oct 16","Oct 17","Oct 18","Oct 19","Oct 20","Oct 21","Oct 22","Oct 23","Oct 24","Oct 25","Oct 26","Oct 27","Oct 28"],"legend":true,"series":[{"name":"This month","data":[912,984,842,897,886,1051,1013,990,981,1127,1123,1172,1029,1210,1178,1271,1085,1177,1264,1151,1243,1284,1227,1422,1313,1367,1305,1444,1399,1536]},{"name":"Last month","data":[850,807,890,820,763,860,842,840,862,827,853,995,983,865,1016,925,1052,943,986,1061,1014,1075,986,997,977,1019,1137,1162,1193,1150],"color":"2"}]}'></div>