Small data isn’t visible for doughnut chart type. Can i resize it without change label value?
My chart options:
JavaScript
x
27
27
1
options: {
2
cutoutPercentage: 65,
3
maintainAspectRatio: false,
4
legend: {
5
display: false
6
},
7
plugins: {
8
datalabels: {
9
display: false
10
}
11
},
12
tooltips: {
13
enabled: true,
14
mode: 'nearest'
15
},
16
scales: {
17
yAxes: [{
18
ticks: {
19
max: 5,
20
min: 0,
21
stepSize: 0.5
22
}
23
}]
24
}
25
26
}
27
Example: http://jsfiddle.net/Lkya2tqb/
Advertisement
Answer
I converted the dataset to percent and round a small value to 1.
JavaScript
1
4
1
var seriesData = [1,210,215];
2
var total = seriesData.reduce((a,v) => a + v);
3
var inPercent = seriesData.map(v => Math.max(v / total * 100, 1));
4
Create callback for tooltip.
JavaScript
1
9
1
tooltips: {
2
callbacks: {
3
label: function(tooltipItem, data) {
4
var value = seriesData[tooltipItem.index];
5
var label = data.labels[tooltipItem.index];
6
return `${label}: ${value}`;
7
}
8
}
9
JavaScript
1
42
42
1
var seriesData = [1, 210, 215];
2
var total = seriesData.reduce((a, v) => a + v);
3
var inPercent = seriesData.map(v => Math.max(v / total * 100, 1));
4
5
var labelsData = ["one", "two", "second"];
6
var backgroundColors = ["#FBC02D", "#E64A19", "#388E3C"]
7
var t = new Chart(document.getElementById('broadcast').getContext('2d'), {
8
type: "doughnut",
9
data: {
10
datasets: [{
11
data: inPercent,
12
backgroundColor: backgroundColors,
13
hoverBorderColor: "#fff"
14
}],
15
labels: labelsData,
16
},
17
options: {
18
cutoutPercentage: 65,
19
maintainAspectRatio: false,
20
legend: {
21
display: false
22
},
23
plugins: {
24
datalabels: {
25
display: false
26
}
27
},
28
tooltips: {
29
enabled: true,
30
mode: 'nearest',
31
callbacks: {
32
label: function(tooltipItem, data) {
33
var value = seriesData[tooltipItem.index];
34
var label = labelsData[tooltipItem.index];
35
return `${label}: ${value}`;
36
}
37
}
38
}
39
40
41
}
42
});
JavaScript
1
2
1
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
2
<canvas id="broadcast" width="350" height="250" style="width: 350px; height: 250px;"></canvas>