jquery flot bar chart bar width

Question

I'm using jquery flot library to plot a bar chart. The bars in my chart are consistantly too thin, about 2px in width. But when I set lineWidth: 15 the bars become the width I want, but the first and the last bars spill over the graph border. I found a simple test flot bar chart with a limited number of points, which looks fine when implemented locally. My conclusion is that maybe I have way too much data, and so the bars are thin in contrast to the amount of points. But I'm hoping there is a way to get the bars to be wider some other way and for them not to spill over the graph border. Any suggestions are much appreciated. Here is what I have:

$.plot(this.get('datasets'), {
    bars: {
       show: true,
       align: "center",
       fill: true,
       //lineWidth: 15
    },
    xaxis: {
       mode: "time",  //"categories",
       timezone: "browser",
       tickLength: 0
    }                   
});

Answer 1

You're using lineWidth instead of barWidth. So your bars are the same width; they just look thicker (and spill over the border) because the lines around them are thick.

The reason why your bars are so narrow are because the width is expressed in axis units, not pixels. In your case, where you're using a time-mode axis, the bar width will be quite large. If you want a bar to cover one hour, then your barWidth should be 60 * 60 * 1000 = 3600000.