Chartjs-How can I remove the white border from Chart.js pie chart when all legends are hidden?

by

1👍

This is not an issue in version 3.2.0 (latest).

const data = {
  labels: [ 'Red', 'Blue', 'Yellow' ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const config = { type: 'pie', data };

new Chart(document.getElementById('myChart'), config);
.chart-container {
  width: 200px;
  height: 200px;
  background: #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

Here is the version 2.5.0 equivalent with your issue:

const data = {
  labels: [ 'Red', 'Blue', 'Yellow' ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const config = { type: 'pie', data };

new Chart(document.getElementById('myChart'), config);
.chart-container {
  width: 200px;
  height: 200px;
  background: #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

0👍

By adding borderWidth: 0 to your dataset config you can remove the white border

Example:

const data = {
  labels: [ 'Red', 'Blue', 'Yellow' ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4,
    borderWidth: 0
  }]
};

const config = { type: 'pie', data };

new Chart(document.getElementById('myChart'), config);
.chart-container {
  width: 200px;
  height: 200px;
  background: #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

Leave a comment