I have such pie chart
which has data labels with values ["", 20, 1, 3, "", "", "", "", 4, 6, 6], it shows all values without any problem, except that it doesn't show value 1. How can i fix it or is it jqPlot bug?

My code is:

function getPieChart(res) {
    var data = [];
    $.each(res, function (ind, resData) {
        data.push([resData.Stage, resData.Count]);
    });
    var dataLbl = [];
    for (var i = 0; i < data.length; i++) {
        if (data[i][1] != 0) {
            dataLbl.push(data[i][1]);
        }
        else {
            dataLbl.push('');
        }
    }
    var piePlot = jQuery.jqplot('pie-chart', [data],
      {
          seriesDefaults: {
              renderer: jQuery.jqplot.PieRenderer,
              rendererOptions: {
                  showDataLabels: true,
                  dataLabels: dataLbl,
                  diameter: 250,
                  dataLabelPositionFactor: 0.5,
                  sliceMargin: 3,
                  color: '#DCDCDC'
              },
              shadow: false
          }
      }
    );
}

I have such pie chart
which has data labels with values ["", 20, 1, 3, "", "", "", "", 4, 6, 6], it shows all values without any problem, except that it doesn't show value 1. How can i fix it or is it jqPlot bug?

My code is:

function getPieChart(res) {
    var data = [];
    $.each(res, function (ind, resData) {
        data.push([resData.Stage, resData.Count]);
    });
    var dataLbl = [];
    for (var i = 0; i < data.length; i++) {
        if (data[i][1] != 0) {
            dataLbl.push(data[i][1]);
        }
        else {
            dataLbl.push('');
        }
    }
    var piePlot = jQuery.jqplot('pie-chart', [data],
      {
          seriesDefaults: {
              renderer: jQuery.jqplot.PieRenderer,
              rendererOptions: {
                  showDataLabels: true,
                  dataLabels: dataLbl,
                  diameter: 250,
                  dataLabelPositionFactor: 0.5,
                  sliceMargin: 3,
                  color: '#DCDCDC'
              },
              shadow: false
          }
      }
    );
}

• javascript
• jquery
• jqplot

3 Answers 3

i dont know whether you could solve this yet, but the problem is the dataLabelThreshold setting

by default its value is 3, so nothing below this value will be shown

try setting its value to zero (range is 0-100) like this

rendererOptions: { 
   dataLabelThreshold: 0, 
   showDataLabels: true, 
   dataLabels: labels, 
   dataLabelFormatString: "%s" 
}

By default labels will show the percentage, but if you set the dataLabels property to label the label passed in the data[] should be shown. The code to put the labels into a new array is unnecessary. See the third example in the documentation: http://www.jqplot./tests/pie-donut-charts.php

 var piePlot = jQuery.jqplot('pie-chart', [data],
  {
      seriesDefaults: {
          renderer: jQuery.jqplot.PieRenderer,
          rendererOptions: {
              showDataLabels: true,
              dataLabels: 'label', //specify to use labels
              diameter: 250,
              dataLabelPositionFactor: 0.5,
              sliceMargin: 3,
              color: '#DCDCDC'
          },
          shadow: false
      }
  }
);

Also it appears you have already built an [[]] with data. I do not think this should be further wrapped in an array.

var piePlot = jQuery.jqplot('pie-chart', data,
      {
        //ommitted
      }

Others have already stated that you need to set the dataLabelThreshold to 0. I would like to add that you should also set the dataLabelPositionFactor to a value like 1.1 to make the value clearly visible.

rendererOptions: { 
   dataLabelThreshold: 0, 
   dataLabelPositionFactor: 1.1,
}

See related question. here