Flot Bar Graph Align Bars with X-Axis Labels

Question

Hello I am trying to plot a bar chart with 31 days data. However when I plot it, the label for each data is not directly in the center below its bar, when i set the bars to

align: "center"

, the first bar and last bar gets cut into half.

Here is the jsfiddle: http://jsfiddle.net/3T6qc/

How do I set it so that i see the full bars and have the labels directly below in the center? Take note that I am using flot as the plotting library.

Deepak Ingole Deepak Ingole · Accepted Answer · 2013-08-18T14:26:59

Hey Here are some points to be noted about your fiddle.

You forgot to use axis label plugin in your example.Flot doesnt have inbuild support axis label.You need to use third party plugin for it. Refer Flot plugin for axis label
For issue about your bars getting cut at edges you can refer Bar chart with align center Following updated code worked for me

}

if (graphMode == "month") {
$( "#hSlider" ).slider( "option", "min", 1.75 ); //add 0.75 offset
$( "#hSlider" ).slider( "option", "max", 31.75 );
$( "#hSlider" ).slider( "option", "values", [ 1, 31 ] );
for (var i = 1; i <= 31; i++) {
    if (i < day)
    {
        d.push([ i, getRandomInt(1200, 1800) ]);
    }
    else
    {
        d.push([ i, 0]);
    }
}
}

So you need to update your code a little to add offset to your bar width.

Flot Bar Graph Align Bars with X-Axis Labels

2 Answers