jqPlot Pie chart data label does not show

Question

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?

enter image description here

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
          }
      }
    );
}

score 4 · Accepted Answer · edited Sep 06 '13 at 14:33

4

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

edited Sep 06 '13 at 14:33

Nunser

4,512
8
25
37

answered Sep 06 '13 at 14:12

Ernesto

56
3

you are right i solved it by making dataLabelThreshold equal 0 – xurca Sep 06 '13 at 14:35

Kevin Bowersox · Answer 2 · 2013-05-23T09:09:50.623

1

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.com/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
      }

edited May 23 '13 at 09:09

answered May 23 '13 at 08:46

Kevin Bowersox

93,289
19
159
189

i tried both dataLabels:'value' and dataLabels:'label', but still it does not show yellow slice value. – xurca May 23 '13 at 08:54
Did you try removing the array around data? `var piePlot = jQuery.jqplot('pie-chart', [data],` to `var piePlot = jQuery.jqplot('pie-chart', data,` – Kevin Bowersox May 23 '13 at 09:08
If you log data to the console prior to calling jqGrid what do you receive? – Kevin Bowersox May 23 '13 at 09:40
data itself is two indexed array ["new",0],["shortList",20],["interview",1],["Testing",3].... – xurca May 23 '13 at 09:45
@xurca Its something with the data, this simple test case works fine: http://jsfiddle.net/q7mtR/1/ – Kevin Bowersox May 23 '13 at 09:55
okey just add more values to this array for example ["A",3] and so on: http://jsfiddle.net/uDBmj/ here interview with value 1 is missing... – xurca May 23 '13 at 10:06
@xurca Gotcha, I misunderstood your question. Could you show the legend? It appears this is default functionality of jqPlot – Kevin Bowersox May 23 '13 at 10:09
never mind i found what i was doing wrong. i should add dataLabelThreshold=0 in rendererOptions. – xurca May 23 '13 at 11:27

score 0 · Answer 3 · answered Jan 08 '19 at 00:48

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

jqPlot Pie chart data label does not show

3 Answers3