jqPlot - bar graph - set highest value to top of the chart

Question

I have a jqplot bar graph, with 3 bar values in it. I tried to make the bar with the highest value to stretch all the way up in the chart (something like setting this value to be the top of the chart), and the other two bars height to be recalculated. This is the code I used:

        var value1 = 119, value2 = 91, value3 = 12;
        var s1 = [value1, value2, value3];
        var ticks = ['a', 'b', 'c'];

        plot7 = $.jqplot('chart7', [s1], {
            seriesColors:['#74b6e7', '#003246', '#e22a20'],
            gridPadding: {top:0, bottom:0, left:0, right:0},
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                shadow: false,
                rendererOptions: {
                    fillToZero: true,
                    barPadding: 0,
                    barMargin: 0,
                    barWidth: 51,
                    groups: 1,
                    varyBarColor: true
                },
                    //pointLabels: { show: false }
            },
            series:[
             {pointLabels:{
                show: true,
                labels:[ value1.toString(), value2.toString(), value3.toString()]
              }}],
            axes: {
                // yaxis: { autoscale: true },
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                },
                yaxis: {
                    min: 0,
                    max: value1
                }
            }
        });

The CSS code:

        .jqplot-grid-canvas, .jqplot-xaxis, .jqplot-yaxis{ display: none;}
        .jqplot-point-label{ top: 129px!important; color: #fff;}
        #chart7{ width: 152px; height: 152px;}

and the graph looks like this:

I can't seem to find out why the first point label isn't showing on the first bar in the graph. What am I doing wrong ?

Answer 1

this would fix your issue:

var value1 = 119, value2 = 91, value3 = 12;
var s1 = [value1, value2, value3];
var ticks = ['a', 'b', 'c'];

plot7 = $.jqplot('chart7', [s1], {
    seriesColors:['#74b6e7', '#003246', '#e22a20'],
    gridPadding: {top:0, bottom:0, left:0, right:0},
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        shadow: false,
        rendererOptions: {
            fillToZero: true,
            barPadding: 0,
            barMargin: 0,
            barWidth: 51,
            groups: 1,
            varyBarColor: true
        },
            //pointLabels: { show: false }
    },
    series:[
     {pointLabels:{
        show: true,
        labels:[ value1.toString(), value2.toString(), value3.toString()],
        location:'s',
        ypadding : 5,
        edgeTolerance : -1
      }}],
    axes: {
        // yaxis: { autoscale: true },
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {
            min: 0,
            max: value1
        }
    }
});

//modify the label positions
var height = $(".jqplot-series-canvas").attr("height");
$(".jqplot-point-label").css("top",height - 10);