[Chartjs]-Pie chart.js – show all 3 segment borders

by

9👍

✅

Use borderAlign: "inner"

https://www.chartjs.org/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.net/npm/chart.js@2.8.0"></script>

2👍

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 overcome 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.net/npm/chart.js@2.8.0/dist/Chart.js"></script>

So, there are two options for you and they are –

  1. Analyze the source code of chart.js. And tweak the implementation to solve the problem
  2. Create a new issue to their GitHub repository

Hope, this helps. Thanks!

Leave a comment