CODEWITHSUNDEEP
javascripthtmlcsschart.js
user8626881
user8626881

Reputation:

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

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? Sketch of a donut with a single radius line showing

Upvotes: 0

Views: 11441

Answers (3)

Міша
Міша

Reputation: 1

Just check how many segments you have.

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

If less than two - remove border from chart config.

borderWidth: isMultipleSegment ? 2 : 0,

Upvotes: 0

Mostafa AboBaker
Mostafa AboBaker

Reputation: 228

you Can Macke Width Border = 0

datasets: [
        {
          data: [300, 50, 100],,
          borderWidth: 0,
          backgroundColor: ['#6683B7', '#FFCA20', '#66D8AD', '#F87E79'],
          hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400'), documentStyle.getPropertyValue('--red-400')]
        }

Upvotes: 0

Prashant Pokhriyal
Prashant Pokhriyal

Reputation: 3837

You can set borderWidth property to 0.

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

jsfiddle

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]
}]

jsfiddle

Upvotes: 11

Related Questions