Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing the white line between slices in Flot pie chart

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
          }
        }
      });
});
like image 925
Canttouchit Avatar asked Sep 13 '13 10:09

Canttouchit


People also ask

How do you get rid of white space in a pie chart?

The white space/line between the slices is the border, to remove it set borderWidth: 0. Alternatively, you can consider using the solid-gauge instead, that is far closer to your examples.

What does each slice in a pie chart represent?

A pie chart is a circle that is divided into areas, or slices. Each slice represents the count or percentage of the observations of a level for the variable. Pie charts are often used in business.


1 Answers

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/

like image 95
EdenSource Avatar answered Nov 15 '22 04:11

EdenSource