Issue
I have a doughnut chart in chartjs, with 5 data types. ie "Overdue", "Waiting for me to sign", "Waiting for partner to sign", "In progress" and "Pending". It has corresponding values of 112, 140, 35, 3 and 1 with background colour #FF4657", "#FFD336", "#00DCFF", "#00C597" and"#0062FF". In this case when i produce the graph for pending data which has a value of 1, is showing without any background colour. But interesting thing is while hovering its showing with correct colour
labels = ["Overdue", "Waiting for me to sign", "Waiting for partner to sign", "In progress", "Pending"];
backgroundColor = ["#FF4657", "#FFD336", "#00DCFF", "#00C597", "#0062FF"];
data = [ 112, 140, 35, 3, 1];
This is the data proportion which gives me this issue.
Here is the image
And when I zoom in i get this, you can see a narrow blue line there
Any help will be appreciated
Solution
The border is being drawn over all of the arcs, so because the value is so small in comparrison with the other values it already has a low percentage and with the border drawn over it, it becomes pixel work and it cant go smaller as 1 pixel so it will start drawing the border over it.
So you can either put the borderWidth to 0 or check the data before visualizing it and remove any data that is soo small that it doesnt visualize correctly.
var options = {
type: 'doughnut',
data: {
labels: ["Overdue", "Waiting for me to sign", "Waiting for partner to sign", "In progress", "Pending"],
datasets: [{
backgroundColor: ["#FF4657", "#FFD336", "#00DCFF", "#00C597", "#0062FF"],
data: [112, 140, 35, 3, 1],
borderWidth: 0
}]
},
options: {
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);body {
max-width: 37%;
}<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
Answered By - LeeLenalee
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.