First of all you will need to include the canvas with a unique id and include chart.js cdn js file and then follow the steps below.
Include Chart.js file
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
HTML
Ass this canvas tag where you want doughnut chart to appear.
<canvas id="doughnut"></canvas>
CSS
you can control width and height of the donut chart with css as following:
#doughnut{
max-width:300px;
max-height:300px;
}
JavasScript
Include the following code after the HTML and Chart JS file include.
const data = {
labels: [
'Completed',
'Progress'
],
datasets: [{
label: 'My First Dataset',
data: [2180, 1586],
backgroundColor: [
'green',
'#cecece'
],
hoverOffset: 0
}]
};
const config = {
type: 'doughnut',
data: data,
options: {
plugins: {
legend: {
display: false
}
},
borderWidth: 0,
cutout: '83%',
rotation: 70
}
};
const myChart = new Chart(
document.getElementById('doughnut'),
config
);
Demo
In this demo, I have removed borders, removed all labels, and rotated it to 70 degrees.
See the Pen Donut chart using Chart.js by Puneet Sharma (@webdevpuneet) on CodePen.
This post is relevant to the following questions.
- How to create a Doughnut and Pie Charts chart with no labels?
- Chart.js code to create doghnut chart.
- How to remove border between doughnut in chart.js?
- How to create a responsive do doughnut chart?