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

Question

When all legends in the chart.js pie (v2.5.0) chart with border are hidden. A line remains (Border). Is there any way to remove the border or clear the pie chart when all legends are disabled?

tried the How can I remove the white border from Chart.js pie chart? on legends clicks when all legends are hidden but it reflects in rendering only after the next event change.

when all legends are visible

When all legends are hidden

Can you include relevant code that produced the images above? — Mr. Polywhirl, May 10 '21 at 18:14

score 1 · Answer 1 · answered May 10 '21 at 18:22

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>

score 0 · Answer 2 · answered May 10 '21 at 19:36

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>

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

2 Answers2