How to hide vertical grid lines in jQuery flot

There is a straight forward method to hide vertical or horizontal grid lines in your jQuery flot bar chart. First of all you need to checkout the flot trunk and include jquery.flot.js and jquery.flot.stack.js scripts in your script. You need the trunk, since released flot - 0.6 does not support this feature.

Then include the following as the options.

xaxis: {
  tickLength: 0
}

 i.e.

<script id="source">
$(function () {
    var d1 = [];
    for (var i = 0; i <= 10; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);
 
    var d2 = [];
    for (var i = 0; i <= 10; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);
 
    var d3 = [];
    for (var i = 0; i <= 10; i += 1)
        d3.push([i, parseInt(Math.random() * 30)]);
 
    var stack = 0, bars = true, lines = false, steps = false;
 
    function plotWithOptions() {
        $.plot($("#placeholder"), [ d1, d2, d3 ], {
            series: {
                stack: stack,
                lines: { show: lines, steps: steps },
                bars: { show: bars, barWidth: 0.6, align: "center" }
            },
            xaxis: { tickLength: 0}
        });
    }
 
    plotWithOptions();
});
</script>