JQplot - Stacked horizontal bars with only two facts

Question

I want to render a very simple horizontal stacked bar with only two facts. Without any axes.

Like this: My target.

But the only thing i could do is this: My actuell Version.

The Problem is that when i only insert two values (e.g. "2" and "7") it only shows me one bar for the "7".And the second problem is the tick on the left side with these little lines. Dont know how to solve this. Any ideas ?

My Code:

$(document).ready(function(){

var s1 = [2];
var s2 = [7];
var s3 = [10];

plot3 = $.jqplot('chart1', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
  renderer:$.jqplot.BarRenderer,
  rendererOptions: {
  barDirection: 'horizontal',
      // Put a 30 pixel margin between bars.
      // barMargin: 30,
      // Highlight bars when mouse button pressed.
      // Disables default highlighting on mouse over.
      highlightMouseDown: true   
  },
  pointLabels: {show: true}
},
axes: {
  yaxis: {

     renderer: $.jqplot.CategoryAxisRenderer,

  },
  xaxis: {
    // Don't pad out the bottom of the data range.  By default,
    // axes scaled as if data extended 10% above and below the
    // actual range to prevent data points right on grid boundaries.
    // Don't want to do that here.
    padMin: 0,
    //max: 15,

  }
},
axesDefaults:{          
        showTicks: false,           
        showTickMarks: false,

        },
legend: {
  show: false,
  location: 'e',
  placement: 'outside'
},
grid:{
        drawGridlines: false,
        borderWidth: 0,
        shadow: false,
        background:'#ffffff',
        gridLineColor: '#FFFFFF',
        },
});
// Bind a listener to the "jqplotDataClick" event.  Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
  $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});

Answer 1

It looks like the padMin: 0 setting on xaxis is causing the second series to be incorrectly displayed. If you remove that altogether it works as you want.

As for removing the grid line ticks, try adding this to the axesDefaults settings

tickOptions: {
    markSize: 0,
}

So it will now look like this:

axesDefaults:{          
        showTicks: false,       
        showTickMarks: false,
        tickOptions: {
            markSize: 0,
        }
},

If it doesn't work with just that, try using the canvasAxisTickRenderer, more details here: http://www.jqplot.com/tests/rotated-tick-labels.php