5

How can I remove the white line between slices and background in Flot pie chart?

My jsfiddle

As you can see it looks like that:

White line

I want it to look like that(Ignore my bad artistic skills):

enter image description here

My Code:

$(function () {
     var data = [
    { label: "Read", data: 50, color: '#614E43' },
    { label: "Unread", data: 150, color: '#F5912D' }];
      $.plot($("#star"), data, 
      {
        series: {

          pie: { 

              radius: 0.2,  
            innerRadius: 0.125,
            show: true
          }
        }
      });
});
Canttouchit
  • 3,149
  • 6
  • 38
  • 51
  • 1
    If you have the same need but for Google Pie Charts API, see this similar question: http://stackoverflow.com/questions/22228074/google-pie-chart-how-can-i-remove-the-white-line-between-slices/22228088#22228088 – Guillaume Mar 06 '14 at 14:59

1 Answers1

11

You can add the STROKE Property

pie: {               
  radius: 0.2,  
  innerRadius: 0.125,
  show: true,
  stroke: { 
      width: 0.1
  }
}

Set the value to 0 totally hide the pie.

So you could also add a stroke color, with the value set to the same color as your background :

pie: {
    radius: 0.2,
    innerRadius: 0.125,
    show: true,
    stroke: {
        width: 0.1,
        color: '#808080'
    }
}

See the Fiddle : http://jsfiddle.net/hSmVH/

EdenSource
  • 3,387
  • 16
  • 29
  • or just add -- color: 'none' – jflay Nov 06 '13 at 18:34
  • setting width:0 does not work, it shows a border of 1px. Setting color:'none' causes hole of doughnut to disappear reverting back to a full pie again. Also width:0.1 still shows a border for doughnut charts larger than say 200px diameter, this gets worse as doughnut charts get bigger. – Martin Belcher - AtWrk Nov 29 '13 at 12:43
  • I take that back setting stroke width:0 does work, this has been fixed in a newer version of Flot than the one I was using – Martin Belcher - AtWrk Nov 29 '13 at 13:19