Search code examples
javascriptchartsbar-chartflotflotr2

How to Center Bar in Flot Char js

i have, some problem with flot.js, in my chart xaxis is not center with the bar, i try with align: 'center' but it's not work, what I want is the xaxis (date label) exactly below the chart this is my code

 $.plot('#grafik-presensi', [data], {
        series: {
                bars: {
                    show: true,
                    barWidth: 0.6,
                    align:'center',
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.9
                        }, {
                            opacity: 0.9
                        }]
                    }
                }
            },
            colors: ['#25476a'],
            yaxis: {
                },
            xaxis: {
                    ticks: ticks,
                    
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: '#eeeeee',
                borderWidth: 0
            },
            legend: {
                show: true,
                position: 'nw'
            },
            tooltip: {
                show: true,
                content: 'Presensi %x, Jumlah %y'
            }

    });
});

enter image description here

Solution

  • Your data x-values and your ticks seem to be shifted corresponding to your timezone (GMT +7). You need to make sure both the data and the ticks us local time or both use UTC. See here for more information.

    If it is not possible to use the same timezone for data and ticks, you can also shift the ticks manually by adding 7 hours to them.