jqPlot StackedBar
Trying to resolve the issue of too much space around bar. I believe it has to do with rendering space for another bar or calculating the space for all 6 bars and not removing it.
HTML
<link rel="stylesheet" href="http://sugar.yd-dev.com/assets/templates/active/js/vendor/jqPlot/jquery.jqplot.css">
<script src="http://sugar.yd-dev.com/assets/templates/active/js/vendor/jqPlot/jquery.jqplot.min.js"></script>
<script src="http://sugar.yd-dev.com/assets/templates/active/js/vendor/jqPlot/jqplot.barRenderer.min.js"></script>
<script src="http://sugar.yd-dev.com/assets/templates/active/js/vendor/jqPlot/jqplot.categoryAxisRenderer.min.js"></script>
<script src="http://sugar.yd-dev.com/assets/templates/active/js/vendor/jqPlot/jqplot.pointLabels.min.js"></script>
<script src="http://sugar.yd-dev.com/assets/templates/active/js/vendor/jqPlot/jqplot.enhancedLegendRenderer.min.js"></script>
<div id="chart1" style="width:90%; height:80px;"></div>
CSS
.jqplot-point-label {
color: #FFF;
text-shadow:1px 1px 1px #555;
font-weight: bold;
font-size: 1em;
}
.jqplot-table-legend {
margin-top: 2em;
}
JavaScript
$(function () {
var s1 = [[6.9],[20],[17.7],[18.1],[15.4],[21.9]];
var labels = ["Less than 1 day", "1 day", "2 days", "3 days", "4 days", "More than 4 days"];
$.jqplot.config.enablePlugins = true;
var plot1 = $.jqplot('chart1', s1, {
stackSeries: true,
seriesColors: ["#86cbbe", "#408abf", "#195288", "#ffda69", "#ed8f61", "#dd6254", "#7bbc6c", "#c36694", "#9b6ebc"] ,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: {
show: true,
formatString: '%#.1f\%',
stackedValue: false
},
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
barWidth:40,
barMargin: 0,
barPadding: 0
}
},
gridPadding: {top:0, right:0, bottom:0, left:0},
legend: {
show: true,
labels: labels,
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberRows: 2,
numberColumns: 3
},
location: 's',
placement: 'outside'
},
axes: {
yaxis: {
ticks: 0,
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
showGridline: false,
markSize: 0
}
},
xaxis:{
ticks: [0,50,100],
tickOptions:{
showGridline:false,
formatString:'%d\%'
},
showTicks: false
}
}
});
});