Tilted Labels JQPlot Bar Graph
HTML
<script src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.pointLabels.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.barRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<div id="chart1" style="height:400px;width:300px; "></div>
CSS
#chart1 .jqplot-point-label {
padding: 1px 3px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
/* 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=1);
}
JavaScript
function removeZeros(x){
return x===0 ? '' : x;
}
$(document).ready(function(){
var line1 = [14, 32, 41, 44, 0, 40];
var line1Labels = line1.map(removeZeros);
var plot3 = $.jqplot('chart1', [line1], {
title: 'Bar Chart with Point Labels',
seriesDefaults: {renderer: $.jqplot.BarRenderer},
series:[
{pointLabels:{
show: true,
labels: line1Labels
}}],
axes: {
xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
yaxis:{padMax:1.3}}
});
});