I have a pie chart.js with the borders set to 1.
When the chart displays, each segment does not display its 3 borders.
I believe that the border is present, but the the next segment is applied over the top of the left border - hiding the left border from display.
Is there a setting that will display all 3 borders of each pie segment?
Here is my code for
new Chart(document.getElementById('example-pie-chart-1'), {
type: 'pie',
data: {
labels: [
'{% blocktrans %}Views{% endblocktrans %}',
'{% blocktrans %}Print Requests{% endblocktrans %}',
'{% blocktrans %}PDF Downloads{% endblocktrans %}',
'{% blocktrans %}DOCX Downloads{% endblocktrans %}',
],
datasets: [{
backgroundColor: [
'rgba(71, 101, 160, 0.3)', // #4765a0.
'rgba(0, 0, 0, 0.3)', // #000000.
'rgba(52, 137, 219, 0.3)', // #3489db.
'rgba(179, 179, 179, 0.3)', // #b3b3b3.
],
hoverBackgroundColor: [
'rgba(71, 101, 160, 0.6)', // #4765a0.
'rgba(0, 0, 0, 0.6)', // #000000.
'rgba(52, 137, 219, 0.6)', // #3489db.
'rgba(179, 179, 179, 0.6)', // #b3b3b3.
],
borderColor: [
'rgba(71, 101, 160, 1)', // #4765a0.
'rgba(0, 0, 0, 1)', // #000000.
'rgba(52, 137, 219, 1)', // #3489db.
'rgba(179, 179, 179, 1)', // #b3b3b3.
],
data: [6, 3, 2, 2]
}]
},
options: {
title: {
display: false,
text: '{% blocktrans %}Overall Statistics{% endblocktrans %}'
}
}
});<canvas id="example-pie-chart-1" width="200" height="200"></canvas>
<script src="/[email protected]"></script>I have a pie chart.js with the borders set to 1.
When the chart displays, each segment does not display its 3 borders.
I believe that the border is present, but the the next segment is applied over the top of the left border - hiding the left border from display.
Is there a setting that will display all 3 borders of each pie segment?
Here is my code for
new Chart(document.getElementById('example-pie-chart-1'), {
type: 'pie',
data: {
labels: [
'{% blocktrans %}Views{% endblocktrans %}',
'{% blocktrans %}Print Requests{% endblocktrans %}',
'{% blocktrans %}PDF Downloads{% endblocktrans %}',
'{% blocktrans %}DOCX Downloads{% endblocktrans %}',
],
datasets: [{
backgroundColor: [
'rgba(71, 101, 160, 0.3)', // #4765a0.
'rgba(0, 0, 0, 0.3)', // #000000.
'rgba(52, 137, 219, 0.3)', // #3489db.
'rgba(179, 179, 179, 0.3)', // #b3b3b3.
],
hoverBackgroundColor: [
'rgba(71, 101, 160, 0.6)', // #4765a0.
'rgba(0, 0, 0, 0.6)', // #000000.
'rgba(52, 137, 219, 0.6)', // #3489db.
'rgba(179, 179, 179, 0.6)', // #b3b3b3.
],
borderColor: [
'rgba(71, 101, 160, 1)', // #4765a0.
'rgba(0, 0, 0, 1)', // #000000.
'rgba(52, 137, 219, 1)', // #3489db.
'rgba(179, 179, 179, 1)', // #b3b3b3.
],
data: [6, 3, 2, 2]
}]
},
options: {
title: {
display: false,
text: '{% blocktrans %}Overall Statistics{% endblocktrans %}'
}
}
});<canvas id="example-pie-chart-1" width="200" height="200"></canvas>
<script src="https://cdn.jsdelivr/npm/[email protected]"></script>2 Answers
Reset to default 9Use borderAlign: "inner"
https://www.chartjs/docs/latest/charts/doughnut.html
new Chart(document.getElementById('example-pie-chart-1'), {
type: 'pie',
data: {
labels: [
'{% blocktrans %}Views{% endblocktrans %}',
'{% blocktrans %}Print Requests{% endblocktrans %}',
'{% blocktrans %}PDF Downloads{% endblocktrans %}',
'{% blocktrans %}DOCX Downloads{% endblocktrans %}',
],
datasets: [{
backgroundColor: [
'rgba(71, 101, 160, 0.3)', // #4765a0.
'rgba(0, 0, 0, 0.3)', // #000000.
'rgba(52, 137, 219, 0.3)', // #3489db.
'rgba(179, 179, 179, 0.3)', // #b3b3b3.
],
hoverBackgroundColor: [
'rgba(71, 101, 160, 0.6)', // #4765a0.
'rgba(0, 0, 0, 0.6)', // #000000.
'rgba(52, 137, 219, 0.6)', // #3489db.
'rgba(179, 179, 179, 0.6)', // #b3b3b3.
],
borderColor: [
'rgba(71, 101, 160, 1)', // #4765a0.
'rgba(0, 0, 0, 1)', // #000000.
'rgba(52, 137, 219, 1)', // #3489db.
'rgba(179, 179, 179, 1)', // #b3b3b3.
],
borderAlign: "inner",
data: [6, 3, 2, 2]
}]
},
options: {
title: {
display: false,
text: '{% blocktrans %}Overall Statistics{% endblocktrans %}'
}
}
});<canvas id="example-pie-chart-1" width="200" height="200"></canvas>
<script src="https://cdn.jsdelivr/npm/[email protected]"></script>After doing some research, I have found that the borders actually overlaps each-other.
Here, the first slice of the pie is drawn at first. So, all of its borders gets colored by the color you provided. Then the second slice is drawn in the same way.
As there is no distance between this two slices border, the right border of 2nd slice overlaps the left border of first slice.
This process continues until the drawing of last slice. When the last slice is drawn, its left border overlaps with the right border of second last slice and then its right border overlaps with the left border of the first slice.
So, we can see only one border of first slice, three borders of the last slice and two borders of other slices are colored properly.
Any proof of the above description?
Well, according my assumption,this problem can be overe by adding space in between the slices so that ones border cannot overlap others borders. But I could not find anything to add spaces between the slices of pie chart. However, I have got one example in this issue. In this example, if we click on a slice, it gets larger. I have attached the code below. When a slice gets larger, we can see that the three borders are of the same color that we provided. So, this issue is actually happening due to overlapping border.
Here is the live demo:
var selectedIndex = null;
var myChart = new Chart(document.getElementById('example-pie-chart-1'), {
type: 'pie',
data: {
labels: [
'{% blocktrans %}Views{% endblocktrans %}',
'{% blocktrans %}Print Requests{% endblocktrans %}',
'{% blocktrans %}PDF Downloads{% endblocktrans %}',
'{% blocktrans %}DOCX Downloads{% endblocktrans %}',
],
datasets: [{
backgroundColor: [
'rgba(71, 101, 160, 0.3)', // #4765a0.
'rgba(0, 0, 0, 0.3)', // #000000.
'rgba(52, 137, 219, 0.3)', // #3489db.
'rgba(179, 179, 179, 0.3)', // #b3b3b3.
],
hoverBackgroundColor: [
'rgba(71, 101, 160, 0.6)', // #4765a0.
'rgba(0, 0, 0, 0.6)', // #000000.
'rgba(52, 137, 219, 0.6)', // #3489db.
'rgba(179, 179, 179, 0.6)', // #b3b3b3.
],
borderColor: [
'rgba(71, 101, 160, 1)', // #4765a0.
'rgba(0, 0, 0, 1)', // #000000.
'rgba(52, 137, 219, 1)', // #3489db.
'rgba(179, 179, 179, 1)', // #b3b3b3.
],
data: [6, 3, 2, 2]
}]
},
options: {
title: {
display: false,
text: '{% blocktrans %}Overall Statistics{% endblocktrans %}'
},
onClick: function(evt, elements) {
if (elements && elements.length) {
var segment = elements[0];
myChart.update();
if (selectedIndex !== segment["_index"]) {
selectedIndex = segment["_index"];
segment._model.outerRadius += 30;
} else {
selectedIndex = null;
}
}
}
}
});<canvas id="example-pie-chart-1" width="200" height="200"></canvas>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/Chart.js"></script>So, there are two options for you and they are -
- Analyze the source code of chart.js. And tweak the implementation to solve the problem
- Create a new issue to their GitHub repository
Hope, this helps. Thanks!