How to Remove the White Border from Chart.Js Pie Chart

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

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 chartvar 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 chartvar 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>

How can I remove the white border from HighCharts pie chart?

You need to set the plotOptions.pie.borderWidth property to 0:

$(function() {  $('#cashflow_graph').highcharts({    chart: {      type: 'pie',      backgroundColor: 'red',    },    title: {      text: false    },    yAxis: {      title: {        text: false      }    },    plotOptions: {      pie: {        dataLabels: {          enabled: false        },        shadow: false,        center: ['50%', '50%'],        borderWidth: 0 // < set this option      },      series: {        states: {          hover: {            enabled: false,            halo: {              size: 0            }          }        }      },
    },    credits: {      enabled: false    },    tooltip: {      enabled: false,      valueSuffix: '%'    },    series: [{      name: 'Cash Flow',      data: [{          name: 'Incoming',          y: 40,
          color: '#87b22e'        }, {          name: 'Outgoing',          y: 30,
          color: 'black'        }, {          name: '',          y: 30,          color: 'white'        }
      ],      size: '80%',      innerSize: '80%',      dataLabels: {        enabled: false,        formatter: function() {          return false;        }      }    }]  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>

Chart.js remove zero value sector in pie chart

Yes this is possible by using the scriptable option for borderwidth like this:

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "f", "d"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 0, 0],
      borderWidth: (a, b, c) => (a.dataset.data[a.dataIndex] === 0 ? 0 : 1),
      backgroundColor: ["red", "blue", "green", "yellow", "pink", "purple", "white", "black"],
      borderColor: ["red", "blue", "green", "yellow", "pink", "purple", "white", "black"]
    }]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

How i can i reduce the borderwidth of a chartjs dougnut chart

Add cutoutPercentage: 80 in your options. You can increase this to make the white area in the middle of your donut chart larger, or decrease it to make it smaller. You'll need to fiddle with it to get your chart as close to the example as you can.

Here are the docs

How to Remove the White Border from Chart.Js Pie Chart

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

How can I remove the white border from HighCharts pie chart?

Chart.js remove zero value sector in pie chart

How i can i reduce the borderwidth of a chartjs dougnut chart

Related Topics

Leave a reply