Chartjs-Chart.js calculates the width of my time x-axis wrong

by

0👍

Like i mentioned in the comment: it’s not that your x-axis has the wrong width, but the bar itself:
I added barThickness: 10 to set the width of the bar and now it only shows on the specific day

var ctx = document.getElementById("myChart");

var data = JSON.parse('{"first":[{"x":"2017-10-09","y":107}]}');

new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      backgroundColor: "rgba(0,120,200,0.4)",
      data: data.first,
      label: 'First',
    }]
  },
  options: {
    hover: {
      mode: null
    },
    legend: {
      display: false,
    },
    maintainAspectRatio: false,
    responsive: true,
    scales: {
      xAxes: [{
        bounds: 'ticks',
        categoryPercentage: 1,
        barPercentage: .1,
        
        time: {
          displayFormats: {
            month: 'MMM YY',
            day: 'D'
          },
          unit: 'month'
        },
        type: 'time'
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value, index, values) {
            return (value % 1 === 0) ? value : null;
          }
        }
      }]
    },
    tooltips: {
      enabled: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

here’s a snippet with more values: 

var ctx = document.getElementById("myChart");
var width = ctx.width/31;
var data = JSON.parse('{"first":[{"x":"2017-10-05","y":107},{"x":"2017-10-09","y":107},{"x":"2017-10-15","y":107},{"x":"2017-10-31","y":107}]}');

new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      backgroundColor: "rgba(0,120,200,0.4)",
      data: data.first,
      label: 'First',
    }]
  },
  options: {
    hover: {
      mode: null
    },
    legend: {
      display: false,
    },
    maintainAspectRatio: false,
    responsive: true,
    scales: {
      xAxes: [{

        bounds: 'ticks',
        barThickness: width,
        time: {
          displayFormats: {
            month: 'MMM YY',
            day: 'D'
          },
          unit: 'month'
        },
        type: 'time'
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value, index, values) {
            return (value % 1 === 0) ? value : null;
          }
        }
      }]
    },
    tooltips: {
      enabled: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Leave a comment