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":[3817,4381,4620,5396,6187,5989,6709,6755,7204,8650,8532,9490]}]}'></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":[2824,3127,3259,3542,4578,4550,5195,4982,5475,5704,5492,6733]},{"name":"Paid","data":[1738,1871,2227,2119,2190,2353,2602,3068,3074,3168,3377,3091],"color":"info"},{"name":"Referral","data":[734,974,949,1126,1092,1394,1264,1647,1659,1831,1687,1868],"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":[13105,11594,12898,13991,14754,16637,16102,15425,16420,17059,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>