YouTipChartjs Doughnut
# Chart.js Doughnut Chart
The doughnut chart is also called a donut chart. It is essentially a pie chart with the center area hollowed out.
A doughnut chart is formed by stacking two or more pie charts of different sizes and cutting out the middle part.
* A pie chart uses a circle and sectors within the circle to represent numerical values. It is mainly used to show the proportion of each component's data to the total data in a sample (or population), and is very useful for studying structural problems.
* The doughnut chart is similar to the pie chart, but with differences. The doughnut chart has a "hole" in the center, with each sample represented by a ring, and each part of the data in the sample represented by a segment of the ring. Therefore, the doughnut chart can display the corresponding proportions of various parts of multiple samples, which is conducive to comparative research on composition.
The doughnut chart **type** attribute is doughnut, where type describes the chart type.
const config = { type: 'doughnut', data: data,};
Next, let's create a simple doughnut chart:
## Example
const ctx = document.getElementById('myChart');
const data ={
labels:[
'Red',
'Blue',
'Yellow'
],
datasets:[{
label:'Doughnut Chart Example',
data:[300,50,100],
backgroundColor:[
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset:4
}]
};
const config ={
type:'doughnut',
data: data,
options:{
responsive:true,// Set chart to be responsive, changing with screen window
maintainAspectRatio:false,// Maintain original chart ratio
scales:{
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
};
const myChart =new Chart(ctx, config);
[Try it »](#)
The output of the above example is: