I am having trouble removing the zeros (point lables) in a Jqplot stacked bar chart. I tried 'hideZero', but it's not working at all.
I tried different things; not sure what's wrong. I have imported the following packages:
jqplot.barRenderer.min.js
jqplot.canvasAxisLabelRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js
jquery-2.0.3.js
jquery.jqplot.min.css
jquery.jqplot.min.js
Here is the JavaScript:
var s3 = [11, 28, 22, 47, 11, 11];
var s1 = [0, 6, 3, 0, 0, 0];
var s2 = [1, 0, 3, 0, 0, 0];
var dataArray = [s3, s1, s2];
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly'];
var options = {
title: 'Title ',
stackSeries: true,
seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
// renderer: $.jqplot.CategoryAxisRenderer,
//
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min: 0,
tickInterval: 5,
max: 50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};
var plot = $.jqplot('chartDivId', dataArray, options);
HTML:
<div id="chartDivId"/>
There is a JSFiddle of this problem.
The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each. [Restated here and at the top of the answer because I only just added the link.]
Documentation for the point labels is in the plugin API documentation for : PointLabels (plugins/jqplot.pointLabels.js).
You can remove the zero value labels by adding the property hideZeros: true
. This means changing:
pointLabels: {
show: true,
},
to:
pointLabels: {
show: true,
hideZeros: true
},
There is a working JSFiddle.
The full JavaScript:
var s3 = [11, 28, 22, 47, 11, 11];
var s1 = [0, 6, 3, 0, 0, 0];
var s2 = [1, 0, 3, 0, 0, 0];
var dataArray = [s3, s1, s2];
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly'];
var options = {
title: 'Title ',
stackSeries: true,
seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
hideZeros: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
// renderer: $.jqplot.CategoryAxisRenderer,
//
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min: 0,
tickInterval: 5,
max: 50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};
var plot = $.jqplot('chartDivId', dataArray, options);
HTML:
<div id="chartDivId"/>