Mixed
Bars and lines on one chart
Revenue and orders
Two scales
Code
<div class="chart" role="img" aria-label="Revenue and orders" style="--chart-h: 320px" data-chart='{"type":"mixed","labels":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"dualAxis":true,"legend":true,"format":"money","axis2Format":"compact","series":[{"name":"Revenue","type":"bar","data":[40539,42870,46927,56700,57252,53203,63269,59196,72217,67625,71633,76689]},{"name":"Orders","type":"line","data":[452,535,575,561,568,620,649,752,696,813,843,916],"axis":1,"color":"info"}]}'></div>Against target
Code
<div class="chart" role="img" aria-label="Against target" style="--chart-h: 300px" data-chart='{"type":"mixed","labels":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"legend":true,"series":[{"name":"Sales","type":"bar","data":[285,341,297,318,383,388,383,420,405,440,424,414]},{"name":"Target","type":"line","data":[320,332,344,356,368,380,392,404,416,428,440,452],"color":"warning","dashed":true}]}'></div>With an area
Code
<div class="chart" role="img" aria-label="With an area" style="--chart-h: 300px" data-chart='{"type":"mixed","labels":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"legend":true,"series":[{"name":"Sign-ups","type":"bar","data":[132,128,138,146,156,171,206,217,242,222,224,256]},{"name":"Active","type":"line","area":true,"data":[848,987,981,1081,1069,1174,1274,1429,1361,1583,1498,1653],"color":"success","axis":0}]}'></div>