Jqplot Stacked Barchart Overlapping Points Label for Lower Values

Question

Jqplot Stacked bar chart points label collapsing for lower values

I'm using Jqplot stacked bar-chart. Its working fine but the problem is for small values for both yellow and blue bars the point labels are overlapping.

can someone help me to fix this to show my both point label without overlap for both values?

Jqplot Options to reder statcked bar chart

ticks =['Jan 14', 'Feb 14', 'Mar 14', 'Apr 14', 'May 14', 'Jun 14', 'Jul 14', 'Aug 14', "Sep 14", 'Oct 14', 'Nov 14', 'Dec 14'];
  var s1 = [73, 112, 307, 849, 1591, 1016, 647, 445, 60, 30, 10, 1];
  var s2 = [4338, 5114, 3484, 2282, 89, 35, 8, 3, 2, 1, 1, 0];
  plot3 = $.jqplot('chart3', [s1, s2], {
    // Tell the plot to stack the bars.
    seriesColors: [ "rgb(255, 78, 80) ", "rgb(29, 171, 54)"],
    animate: !$.jqplot.use_excanvas,
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
          // Put a 30 pixel margin between bars.
          barMargin: 30,
          highlightMouseDown: true   
      },
      pointLabels:{ show:true, stackedValue: false }
    },
    series:[
            {label:'Inflight'},
            {label:'Completed'}
        ],
    axes: {
      xaxis: {
          ticks: ticks,
          renderer: $.jqplot.CategoryAxisRenderer
      },
      yaxis: {
        padMin: 0
      }
    },
    legend: {
      show: true,
      location: 'n'/*,
      placement: 'outside'*/
    }      
  });

Can you show options for plotting chart? – MysticMagicϡ May 01 '14 at 14:47 — MysticMagicϡ, May 01 '14 at 14:47
I've attached plot options used to draw chart. – bleedCoder May 02 '14 at 12:30 — bleedCoder, May 02 '14 at 12:30
rotate the text -45 degress, see my answer below. – Oliver M Grech May 11 '20 at 21:19 — Oliver M Grech, May 11 '20 at 21:19

score 2 · Answer 1 · answered May 05 '14 at 06:29

You can use the ypadding option (documentation here) in order to specify a padding between point and label. Please see an example here where I have specify a padding value for your series :

series:[
 {label:'Inflight', pointLabels: {ypadding: 2}},
 {label:'Completed', pointLabels: {ypadding: 15}}
]

I think you'll need to modify it in order to make these padding dependents of the series' values.

score 0 · Answer 2 · answered May 11 '20 at 21:18

Best way to solve this is to rotate the text -45 degrees with CSS.. very simple..

.jqplot-point-label {
    transform: rotate(-45deg);
}

Of course you should be aware of what other graphs or reports you might effect with this.

PS: For cross browser, use the below class Taken and modified from How can I draw vertical text with CSS cross-browser?

.rotate {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Jqplot Stacked Barchart Overlapping Points Label for Lower Values

2 Answers2