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

Answer 1

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

1. 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

2. 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.