javascriptjqueryjqplot

Removing zero value point lables on a Jqplot stacked bar chart


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.

Graph with zeros

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.


Solution

  • 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.

    enter image description here

    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"/>