score:1

Accepted answer

you should add option offset: true to the x-axis as follows:

xaxes: [{
  type: 'time',
  offset: true,

please take a look at your amended code and see how it works.

var ctx = document.getelementbyid("chart").getcontext('2d');
var recentactivitychart = new chart(ctx, {
  type: 'bar',
  data: {
    labels: ['2020-01-01', '2020-01-02', '2020-01-03'],
    datasets: [{
      label: 'hours',
      data: [60, 44, 43],
      barthickness: 12,
      backgroundcolor: "rgba(54, 162, 235, 1)",
      bordercolor: "rgba(54, 162, 235, 1)",
      borderwidth: 1
    }]
  },
  options: {
    animation: {
      duration: 1000,
      easing: "linear",
    },
    responsive: true,
    maintainaspectratio: true,
    legend: {
      display: false,
      position: 'bottom',
      usepointstyle: true,
      labels: {
        fontcolor: "grey",
        usepointstyle: true,
      },
    },
    scales: {
      yaxes: [{
        gridlines: {
          display: true,
          borderdash: [8, 4],
        },
        scalelabel: {
          display: true,
          labelstring: 'hours',
        },
        ticks: {
          beginatzero: false,
        }
      }],
      xaxes: [{
        type: 'time',
        offset: true,
        time: {
          unit: 'day',
          displayformats: {
            day: 'dd-mm-yyyy'
          },
        },
        gridlines: {
          scaleshowverticallines: false,
          display: false,
        },
        ticks: {
          beginatzero: false,
        }
      }]
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.bundle.js"></script>
<canvas id="chart" width="400" height="200"></canvas>


Related Query

More Query from same tag