How to move time axis origin in chart.js?

0
votes

I was trying to plot tasks given by server on a time scale map using chartjs but the time axis is shifted to 05:30AM instead of 00:00AM which i was expecting.

Here is my fiddle.

<canvas id="myChart"></canvas>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>

    // setup 
    const data = {
      labels: ['Jobs'],
      datasets: [{
        label: 'Job one',
        data: [
            [0,800000],
          ],
        backgroundColor: 'rgba(255, 26, 104, 0.2)',
        borderColor: 'rgba(255, 26, 104, 0.2)',
        borderWidth: 1
      },
      {
        label: 'Job2',
        data: [
            [1800000,2900000],
          ],
        backgroundColor: 'rgba(255, 255, 05, 0.2)',
        borderColor: 'rgba(255,255, 0, 1)',
        borderWidth: 1
      },]};

    // config 
    const config = {
      type: 'bar',
      data,
      options: {
        
        indexAxis:'y',
        scales: {
          
          x:{
                /* beginAtZero: true, */
                type:'time',
                time:{
                  unit:'minute',
                  timezone: 'Asia/Kolkata',
                },
             },
          y: {
            /* beginAtZero: true, */
            stacked: true,
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
    
</script>

I am guessing this has got something to do with my time zone being GMT+0530 but I tried changing it to no avail.

The time interval data comes from a server in milliseconds and I was hoping the first bar would be starting from 00:00 but instead it begins at 0530.

Can someone point me in the right direction?

javascriptchart.js