abenrob
abenrob

Reputation: 886

Data labels cutting off in jqPlot

I'm working with jqplot, and am seeing some odd series label behavior. If the value is too large, the labels don't show. I can't find a setting that preserves canvas area for the labels. Any thoughts?

[example fiddle] http://jsfiddle.net/abenrob/nDcPB/11/

$(document).ready(function(){          
    optionsObj = {
        grid: {
            background: "rgba(0,0,0,0.0)",
            drawBorder: false,
            shadow: false
        }, 
        seriesColors: ["#6699FF"],
        seriesDefaults:{
            shadow:false, 
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                barDirection: 'horizontal',
                barWidth:15,
                barMargin: 5
            }
        }, 
        series:[
            {pointLabels:{
                show: true
            }}],
        axesDefaults: {
            rendererOptions: {
            drawBaseline: false
            }
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                tickOptions:{
                    showGridline:false, 
                    markSize:0
                }
            },
            xaxis:{
                tickOptions:{
                    show: false,
                    showGridline:false, 
                    markSize:0
                }
            }
        }
    };
    // labels not shown
    plot = $.jqplot('chart1', [[[507740000000,'Budget'],[496740000000,'Forecast'],[506740000000,'Expended']]], optionsObj)
    // labels shown
    plot2 = $.jqplot('chart2', [[[50774000,'Budget'],[49674000,'Forecast'],[50674000,'Expended']]], optionsObj)
});

Upvotes: 0

Views: 1287

Answers (1)

Mark
Mark

Reputation: 108567

Doesn't seem like jqPlot will render them if there's not enough space to the right of your bars. You can use the xaxis pad option to provide more space but I also had to throw a min: 0 in there to get the auto-scaling to behave a little saner:

...
      xaxis:{
            tickOptions:{
                show: false,
                showGridline:false, 
                markSize:0
            },
           min: 0,
           pad:1.8
        }
...

enter image description here

Updated fiddle here.

Upvotes: 1

Related Questions