How to remove the inside-border from a single-element doughnut chart? Chart.js

Question

If there is only one element (segment) in a Pie or Doughnut chart, a single radius line is drawn at the start/end of that single segment.

I want to remove the marked white line to make it a uniformly colored donut/circle, while keeping the outer/inner border lines.

Is there any option to do that? If not, how can one achieve this without painting over canvas?

why do people minus this question? is this wrong or what? stackoverflow community at its best :) — , Nov 29 '17 at 08:42
You tagged your question with html and css, i expect they want to see your code — Filnor, Nov 29 '17 at 08:43
Possible duplicate of [How can I remove the white border from Chart.js pie chart?](https://stackoverflow.com/questions/36339791/how-can-i-remove-the-white-border-from-chart-js-pie-chart) — Neeraj, Nov 29 '17 at 09:12
what code they want to see? this is irrelevant i have asked a simple question, there is no need to write my code here... — , Nov 29 '17 at 10:45

Prashant Pokhriyal · Answer 1 · 2017-11-30T07:40:44.540

10

You can set borderWidth property to 0.

options: {
  elements: {
      arc: {
          borderWidth: 0
      }
  }
}

Update

If you just want to remove only one border then you can do this using following code

datasets: [{
  data: [1, 2, 3, 4],
  backgroundColor: ["#BDC3C7","#9B59B6","#E74C3C","#26B99A"],
  borderWidth: [0, 1, 1, 0]
}]

edited Nov 30 '17 at 07:40

answered Nov 29 '17 at 20:18

1

but i dont want to hide entire border, because it will make the chart invisible, i just want to hide this one line – Nov 30 '17 at 06:48
but still it will delete the entire border of one element and make the chart invisible(because there is only one element) – Nov 30 '17 at 08:02
2

how is it unclear, i have even marked the line i want to get rid off on a picture...... – Nov 30 '17 at 08:25

score 0 · Answer 2 · answered May 10 '23 at 14:02

0

Just check how many segments you have.

const isMultipleSegment = seriesData.filter(val => val > 0).length > 1;

If more than one - remove border from chart config.

borderWidth: isMultipleSegment ? 2 : 0,

answered May 10 '23 at 14:02

Міша

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 10 '23 at 16:53

2 Answers2