Line
Change over time
Basic
One series
Code
<div class="chart" role="img" aria-label="Basic" style="--chart-h: 300px" data-chart='{"type":"line","labels":["Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"],"series":[{"name":"Visitors","data":[4088,4981,5503,5182,6081,5970,7326,6425,7097,7760,9182,8691]}]}'></div>Several series
With a legend
Code
<div class="chart" role="img" aria-label="Several series" style="--chart-h: 300px" data-chart='{"type":"line","labels":["Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"],"legend":true,"series":[{"name":"Organic","data":[3010,3479,3376,3772,4054,4441,5033,4654,5611,6060,5724,5867]},{"name":"Paid","data":[1741,2029,2250,2125,2556,2313,2937,2789,3222,3256,3195,3571],"color":"info"},{"name":"Referral","data":[753,968,905,1045,1208,1417,1323,1619,1595,1739,1755,1762],"color":"success"}]}'></div>Dashed forecast
This year: the actual months, then what is predicted
Code
<div class="chart" role="img" aria-label="Dashed forecast" style="--chart-h: 300px" data-chart='{"type":"line","labels":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"legend":true,"series":[{"name":"Actual","data":[12514,12983,13134,13172,13951,16546,14563,17995,16385,17867,null,null]},{"name":"Forecast","data":[null,null,null,null,null,null,null,null,null,17800,19200,20500],"dashed":true,"color":"warning"}]}'></div>Straight lines
Without smoothing, the last seven days
Code
<div class="chart" role="img" aria-label="Straight lines" style="--chart-h: 300px" data-chart='{"type":"line","smooth":false,"labels":["Thu","Fri","Sat","Sun","Mon","Tue","Wed"],"series":[{"name":"Tickets","data":[64,59,22,18,42,51,38]}]}'></div>