Ris Ris - 1 year ago 243
CSS Question

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

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"/>

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download