title: Align bars with bar labels in jqPlot
body: <p>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?</p>
  
  <p><img src="https://i.stack.imgur.com/dweYR.jpg" alt="Image showing misaligned bars"></p>
  
  <p>Here is the code i use for rendering the chart:</p>
  
  <pre><code>function drawReadsChart(json) {
          var s1 = [['&lt;%= GetText("Combo Total") %&gt;', json.Data.Combo.Total]];
          var s2 = [['&lt;%= GetText("Soil In Total") %&gt;', json.Data.SoilIn.Uhf]];
          var s3 = [['&lt;%= GetText("UHF") %&gt;', json.Data.Combo.Uhf]];
          var s4 = [['&lt;%= GetText("LF") %&gt;', 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
                  }
              }
          });
      }
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>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. </p>