Below is the code that is used in creating the pie and doughnut chart
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Line Chart</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<!--
-->
<div class="container-fluid p-3 mt-3 bg-dark bg-gradient text-white">
<h1>JS Charts</h1>
</div>
</head>
<body>
<div class="row">
<div class="container col-6 mt-3">
<canvas id="mychart3"></canvas>
<script>
var xValues = [2020,2021,2022,2023];
var yValues = [800,1000,900,300];
new Chart("mychart3", {
type: "pie",
data: {
labels: xValues,
datasets: [{
backgroundColor: ["rgba(120,0,0,0.5)","rgba(0,120,0,0.5)","rgba(0,0,120,0.5)","rgba(120,120,0,0.5)"],
hoverBackgroundColor: ["rgba(120,0,0,0.8)","rgba(0,120,0,0.8)","rgba(0,0,120,0.8)","rgba(120,120,0,0.8)"],
hoverBorderColor: ["rgba(120,0,0,1)","rgba(0,120,0,1)","rgba(0,0,120,1)","rgba(120,120,0,1)"],
hoverBorderWidth:'4',
borderColor : "#FFFFFF",
borderWidth : '2',
data: yValues
}]
},
options: {
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
</script>
</div>
<div class="container col-6 mt-3">
<canvas id="mychart4"></canvas>
<script>
var xValues = [2020,2021,2022,2023];
var yValues = [800,1000,900,300];
new Chart("mychart4", {
type: "doughnut",
data: {
labels: xValues,
datasets: [{
backgroundColor: ["rgba(120,0,0,0.5)","rgba(0,120,0,0.5)","rgba(0,0,120,0.5)","rgba(120,120,0,0.5)"],
hoverBackgroundColor: ["rgba(120,0,0,0.8)","rgba(0,120,0,0.8)","rgba(0,0,120,0.8)","rgba(120,120,0,0.8)"],
hoverBorderColor: ["rgba(120,0,0,1)","rgba(0,120,0,1)","rgba(0,0,120,1)","rgba(120,120,0,1)"],
hoverBorderWidth:'5',
borderColor : "#FFFFFF",
borderWidth : '2',
data: yValues},
]
},
options: {
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
</script>
</div>
</div>
</body>
</html>
For more detailed instruction, feel free to check out my YouTube video :
Comments