CODEWITHSUNDEEP
jqueryflotpie-chartdonut-chart
Holger
Holger

Reputation: 502

Flot donut chart disappears when labels are shown

I have a created a simple donut chart with flot. However, if I use the default settings the labels are not displayed (even if I specify "show: true"). Only when I hide the legend, the labels are displayed but then the chart itself disappears. Am I missing something or is this a bug in the flot library?

This is my code:

var data = [
  {label: "A", data: 373, color: "red"},
  {label: "B", data: 84, color: "blue"},
  {label: "C", data: 73, color: "green"}    
];

$.plot("#chart", data, {
  series: {
    pie: {
      innerRadius: 0.75,
      show: true,
    }
  },
  label: {
    show: true,
  },
  legend: {
    show: false
  }
});

JsFiddle

Upvotes: 3

Views: 665

Answers (1)

mechenbier
mechenbier

Reputation: 3067

Looking at the pie chart plugin code, the legend visibility controls the label visibility, which in turn controls the radius of the chart if pie.radius is set to auto (which is the default value if it has't been explicitly set - applicable code below).

You happened to pick .75 as the innerRadius of the chart, which is what the plugin sets as the radius in this situation. When radius and innerRadius are equal, the disappearing phenomenon you're describing occurs.

// set labels.show
if (options.series.pie.label.show == "auto") {
    if (options.legend.show) {
        options.series.pie.label.show = false;
    } else {
        options.series.pie.label.show = true;
    }
}

// set radius
if (options.series.pie.radius == "auto") {
    if (options.series.pie.label.show) {
        options.series.pie.radius = 3/4;
    } else {
        options.series.pie.radius = 1;
    }
}

Why was the plugin written this way? I'm not sure - but you can fix it by setting your innerRadius to something other than .75 when you've turned off the legend, or specifying both the innerRadius and radius properties:

$(function() {
  var data = [{
    label: "A",
    data: 373,
    color: "red"
  }, {
    label: "B",
    data: 84,
    color: "blue"
  }, {
    label: "C",
    data: 73,
    color: "green"
  }];

  $.plot("#chart", data, {
    series: {
      pie: {
        innerRadius: 0.5,
        radius: .75,
        show: true,
      }
    },
    label: {
      show: true,
    },
    legend: {
      show: false
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script>

<div id="chart" style="width: 600px; height: 300px;"></div>

Upvotes: 2

Related Questions