html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>My Stacked Bar Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//bar chart using chart.js library
window.onload =()=>{
let cs = document.querySelector("#canvas");
let myChart = new Chart(cs,{
type: "bar",
data:{
labels:["Risk Level"],
datasets:[
{
label:"Low",
data:[35.7],
backgroundColor: "#CCFFCC"
},
{
label: "Mid",
data:[54.2],
backgroundColor: "#CCFFEE"
},
{
label: "High",
data:[78.9],
backgroundColor: "#FFAAAA"
}
],
},
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run