How can I remove the white border from Chart.js pie chart?

Question

I am using Chart.js pie chart and I'd like to remove white lines between slices. Could someone tell me way to do this ? Thanks in advance

I didn't see anything in the documenation.

    <div class="pie-chart">
         <div id="canvas-holder">
              <canvas id="chart-area" width="250" height="250"/>
         </div>
    </div>

what happens if you configure it to use this option `segmentShowStroke : false,` ? — blurfus, Mar 31 '16 at 17:26
http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options segmentShowStroke is the correct answer here. — xkcd149, Mar 31 '16 at 17:27

score 117 · Answer 1 · edited Jan 31 '18 at 18:16

117

In chart.js@2.2.2 (haven't tested for chart.js@2.x.x):

const options = {
    elements: {
        arc: {
            borderWidth: 0
        }
    }
};

edited Jan 31 '18 at 18:16

blurfus

13,485
8
55
61

answered Sep 01 '16 at 14:30

grebenyuksv

1,729
2
12
9

12

This should be the accepted answer, for the current version of Chartjs – Pierrick Bignet Apr 29 '17 at 23:08
This works for me when using the default colors. If you define custom colors the borders reappears. To remove them you have to add the option segmentShowStroke: false. – Ole_S May 15 '18 at 09:21
1

Works for 2.7.3, just to let people know. – whatamidoingwithmylife Nov 07 '18 at 15:04
Any idea on how to remove the white border for bar chart? I used the same approach and it doesn't work. – Marcello Silva Dec 10 '19 at 12:57

blurfus · Accepted Answer · 2018-01-31T18:15:07.507

18

UPDATE

For newer versions of Chart.js (i.e. 2.2.2 and higher), see @grebenyuksv's answer.

This answer was added for an older version of Chart.js (i.e. 1.0.2)

Original answer

Just configure the options for the chart to hide the line

segmentShowStroke: false

Something like this:

//create chart
var ctx = document.getElementById("myChart").getContext("2d");

var data = [{
  value: 300,
  color: "#F7464A",
  highlight: "#FF5A5E",
  label: "Red"
}, {
  value: 50,
  color: "#46BFBD",
  highlight: "#5AD3D1",
  label: "Green"
}, {
  value: 100,
  color: "#FDB45C",
  highlight: "#FFC870",
  label: "Yellow"
}];

var options = {
  //Boolean - Whether we should show a stroke on each segment
  // set to false to hide the space/line between segments
  segmentShowStroke: false
};

// For a pie chart
var myPieChart = new Chart(ctx).Pie(data, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

edited Jan 31 '18 at 18:15

answered Mar 31 '16 at 17:31

blurfus

13,485
8
55
61

@Sudhanshusharma please expand on your comment... It works for me on Win 7/Chrome and Win7/Firefox. – blurfus Jan 31 '18 at 18:09
may be I have latest version of chart.js. for me most voted answer works – Sudhanshu sharma Jan 31 '18 at 19:35
@Sudhanshusharma that might be why then.. but for future reference: ***Do not deface my answer*** - edits are welcome but a total re-write is a big no-no. Write your own answer if you happen to disagree someone's answer but completely changing it is not right – blurfus Jan 31 '18 at 19:38
your answer have 5 votes and accepted but for most of the user your answer didn't work. below to your answer have 47 votes. you should include the correct answer also because your answer is accepeted. – Sudhanshu sharma Jan 31 '18 at 19:42
1

@Sudhanshusharma **So?** my answer was written A) 6 months prior the current highest-voted one. B) the current version did not have a solution at the time and C) using a version accepted by the OP. Further clarification was indeed needed (which I added) but that does not mean my answer was incorrect or that needed to be defaced. – blurfus Jan 31 '18 at 19:46
How do I don this in doughnut chart ? – Ashutosh Shrestha Dec 20 '19 at 14:58
@AshutoshShrestha do you have a question of your own that we can have a look at? I'd be happy to help you with it – blurfus Dec 20 '19 at 20:27

score 17 · Answer 3 · answered Jul 19 '18 at 12:29

For newest Chartjs like 2.7.2 just put: borderWidth: 0 in the data

var ctx = $('#progress-chart');
     var data = {
      datasets: [{
          data: [25, 50, 25],
          backgroundColor: ['red', 'green', 'blue'],
          borderWidth: 0, //this will hide border
      }],

      // These labels appear in the legend and in the tooltips when hovering different arcs
      labels: [
          'Red',
          'Green',
          'Blue'
    ]
  };
        var progressChart = new Chart(ctx,{
      type: 'pie',
      data: data,
      options: Chart.defaults.pie
  });

<div>
  <canvas id="progress-chart" width="500" height="250">   </canvas>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js">
    </script>

borderWidth: 0, //this will hide border Solved my problem – Therichpost Jan 16 '19 at 05:35 — Therichpost, Jan 16 '19 at 05:35

score 2 · Answer 4 · answered Jun 30 '18 at 21:33

2

Chart.defaults.global.elements.arc.borderWidth = 0;

Place it at the beginning of your javascript code.

answered Jun 30 '18 at 21:33

Serhii Nuzhnyi

29
5

score 1 · Answer 5 · edited Apr 17 '17 at 18:26

1

datasets: [
            {
                label: "TeamB Score",
                data: [20, 35, 40, 60, 50],
                backgroundColor: [
                    "#FAEBD7",
                    "#DCDCDC",
                    "#E9967A",
                    "#F5DEB3",
                    "#9ACD32"
                ],
                borderColor: [
                    "#E9DAC6",
                    "#CBCBCB",
                    "#D88569",
                    "#E4CDA2",
                    "#89BC21"
                ],
                borderWidth: [1, 1, 1, 1, 1]
            }
        ]

edited Apr 17 '17 at 18:26

Rai Vu

1,595
1
20
30

answered Apr 17 '17 at 17:40

Robert

27
1

3

When leaving an answer you need to leave more than just a code block. You should explain what this is doing. Also, since this appears to be code it should be in a code block. – Mike Apr 17 '17 at 17:58

How can I remove the white border from Chart.js pie chart?

5 Answers5

Linked