Align bars with bar labels in jqPlot

Question

i'm unable to align the bars of my jqPlot with the corresponding labels. Please see the image of my chart. How can i make sure that the bars are centered right on top of the labels?

Here is the code i use for rendering the chart:

function drawReadsChart(json) {
        var s1 = [['<%= GetText("Combo Total") %>', json.Data.Combo.Total]];
        var s2 = [['<%= GetText("Soil In Total") %>', json.Data.SoilIn.Uhf]];
        var s3 = [['<%= GetText("UHF") %>', json.Data.Combo.Uhf]];
        var s4 = [['<%= GetText("LF") %>', json.Data.Combo.Lf]];

        $.jqplot('chart', [s2, s3, s4, s1], {
            grid: {
                drawBorder: false,
                shadow: false
            },
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: { fillToZero: true, shadow: false },
                pointLabels: { show: true }
            },

            series: [
                { color: '#68BA38' },
                { color: '#68BA38' },
                { color: '#28C9DE' },
                { color: '#2895DE' }
            ],
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                },
                yaxis: {
                    padMin: 0
                }
            }
        });
    }

EDIT:

I had to put all my 4 series into 1 serie. Then everything aligned correctly. To be able to assign colors to each bar individually, i had to set 'varyBarColor: true' on the BarRenderer, and also specify 'seriesColors'. Makes no sense, but it works.

Answer 1

First thing is your div container is too lager than it normally need. Try to reduce it's width. Your labels are rendered centered default, but you can move them right left.you can use this tickOptions: { labelPosition: 'middle' }to move it. also refer this link http://www.jqplot.com/tests/rotated-tick-labels.php

Answer 2

I had to combine my 4 series to 1 serie. Like this:

var bars = [['<%= GetText("Soil In Total") %>', json.Data.SoilIn.Uhf, 
['<%= GetText("UHF") %>', json.Data.Combo.Uhf], 
['<%= GetText("LF") %>', json.Data.Combo.Lf], 
['<%= GetText("Combo Total") %>', json.Data.Combo.Total]];