CODEWITHSUNDEEP
javascriptjqueryjqplotbar-chart
bleedCoder
bleedCoder

Reputation: 369

Jqplot Stacked Barchart Overlapping Points Label for Lower Values

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'*/
    }      
  });

Upvotes: 1

Views: 2662

Answers (2)

Oliver M Grech
Oliver M Grech

Reputation: 3181

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

Upvotes: 0

AnthonyLeGovic
AnthonyLeGovic

Reputation: 2335

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.

Upvotes: 2

Related Questions