Search code examples
javascriptangularjsbar-chartflot

Flotcharts barChart first and last bar cut off

I'm using a combination of Flot Charts and AngularJs to display a bar chart. Originally the chart was created to be a line chart. The bar chart uses the time mode and the displayed data is linked by timestamps.

Chart options:

$scope.chartOptions = {
    series : {
        bars: {
            show: true, 
            barWidth: 60*60*60*60,
            align: 'center'
        }
    },
    grid : {
        borderColor : '#eee',
        borderWidth : 1,
        backgroundColor: null,
        clickable: true
    },
    yaxis:{
        minTickSize: 0, 
        tickDecimals: 0
    },
    xaxis: {
        mode: "time",
        tickSize: [1, 'day'],
        timeformat: "%d %b",
        minTickSize: 7,
        timezone: 'browser'
    },
    shadowSize : 0
};

Chart data:

[[1445814000000,3],[1445900400000,3],[1445986800000,15],[1446073200000,9]]

And the chart is displayed like this: http://puu.sh/lgi6e/83f61cbf8c.png

How can I fully display the first (and last) bar?

Solution

  • I can't comment so I'll answer!

    The code you've provided works fine when I plumb it in to Flot, the graph shows the full bar on the left, I've created a quick Fiddle here: http://fiddle.jshell.net/6xpLey6e/1/ and checked with IE and Chrome.

    [Change the barwidth to barWidth: 24 * 60 * 60 * 1000,for full width bars]

    There must be something else at play.