I'm using Flot library with angular-flot. I have a fixed sized chart which doesn't look nice when having f.e. 1 or 2 bars. You can see the example below for 2 bars:

The bars try to spread over the whole length of the x axis. I want the to be centered - they should "start" in the middle and spread horizontally. Is that possible in Flot?

My options for bars:

options: {
    series: {
        bars: {
            show: true,
            barWidth: 0.4,
            lineWidth: 1,
            align: 'center',
            fillColor: {
                colors: [{
                    opacity: 0.5
                }, {
                    opacity: 0.1
                }]
            }
        }
    },
    xaxis: {
       mode: 'categories',
       axisLabel: 'Machines',
       axisLabelUseCanvas: true,
       axisLabelFontSizePixels: 14,
       axisLabelFontFamily: 'RobotoLight, Helvetica Neue, Helvetica',
       axisLabelPadding: 10
    },
    yaxis: {
       axisLabel: metricName,
       axisLabelUseCanvas: true,
       axisLabelFontSizePixels: 14,
       axisLabelFontFamily: 'RobotoLight, Helvetica Neue, Helvetica',
       axisLabelPadding: 10
    },
    grid: {
       hoverable: true,
       clickable: false,
       borderWidth: 1
    }
}

I'm using Flot library with angular-flot. I have a fixed sized chart which doesn't look nice when having f.e. 1 or 2 bars. You can see the example below for 2 bars:

The bars try to spread over the whole length of the x axis. I want the to be centered - they should "start" in the middle and spread horizontally. Is that possible in Flot?

My options for bars:

options: {
    series: {
        bars: {
            show: true,
            barWidth: 0.4,
            lineWidth: 1,
            align: 'center',
            fillColor: {
                colors: [{
                    opacity: 0.5
                }, {
                    opacity: 0.1
                }]
            }
        }
    },
    xaxis: {
       mode: 'categories',
       axisLabel: 'Machines',
       axisLabelUseCanvas: true,
       axisLabelFontSizePixels: 14,
       axisLabelFontFamily: 'RobotoLight, Helvetica Neue, Helvetica',
       axisLabelPadding: 10
    },
    yaxis: {
       axisLabel: metricName,
       axisLabelUseCanvas: true,
       axisLabelFontSizePixels: 14,
       axisLabelFontFamily: 'RobotoLight, Helvetica Neue, Helvetica',
       axisLabelPadding: 10
    },
    grid: {
       hoverable: true,
       clickable: false,
       borderWidth: 1
    }
}

• javascript
• angularjs
• flot

• 1 Can you build a fiddle, which shows your chart? My first idea without seeing your chart: Try to add one empty or zero datapoint to each end of your data series. – Raidri Commented Jun 6, 2014 at 10:13

1 Answer 1

Just set an intelligent min/max on the xAxis options. For instance, on a plot with two bars:

min: -0.5,
max: 1.5,

For each additional bar increase the max by one.

Here's a fiddle.