41

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.

enter image description here

    <div class="pie-chart">
         <div id="canvas-holder">
              <canvas id="chart-area" width="250" height="250"/>
         </div>
    </div>
4
  • 3
    what happens if you configure it to use this option segmentShowStroke : false, ?
    – blurfus
    Mar 31, 2016 at 17:26
  • 1
    chartjs.org/docs/#doughnut-pie-chart-chart-options segmentShowStroke is the correct answer here.
    – xkcd149
    Mar 31, 2016 at 17:27
  • @ochi that worked ! very simple fix...thanks...
    – Ris
    Mar 31, 2016 at 17:30
  • I am glad it worked :)
    – blurfus
    Mar 31, 2016 at 17:38

5 Answers 5

117

In [email protected] (haven't tested for [email protected]):

const options = {
    elements: {
        arc: {
            borderWidth: 0
        }
    }
};
4
  • 12
    This should be the accepted answer, for the current version of Chartjs Apr 29, 2017 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, 2018 at 9:21
  • 1
    Works for 2.7.3, just to let people know. Nov 7, 2018 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. Dec 10, 2019 at 12:57
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>

7
  • @Sudhanshusharma please expand on your comment... It works for me on Win 7/Chrome and Win7/Firefox.
    – blurfus
    Jan 31, 2018 at 18:09
  • may be I have latest version of chart.js. for me most voted answer works Jan 31, 2018 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, 2018 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. Jan 31, 2018 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, 2018 at 19:46
17

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>

1
  • borderWidth: 0, //this will hide border Solved my problem Jan 16, 2019 at 5:35
2
Chart.defaults.global.elements.arc.borderWidth = 0;

Place it at the beginning of your javascript code.

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]
            }
        ]
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, 2017 at 17:58

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.