Chartjs-Using ticks 'major' with Chart.js is overlapping with an unknown text

by

0👍

It’s hard to guess the cause of your problem without seeing more of your code. In below runnable code snippet I use the same options as you and it works just fine.

Please make sure to use the most recent stable version of Chart.js (currently v2.9.3) and check if this solves your problem.

new Chart('chart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'things',
      borderColor: 'blue',
      backgroundColor: 'lightblue',
      data: [
        { t: new Date("05/01/2020"), y: 2 },
        { t: new Date("05/02/2020"), y: 0 },
        { t: new Date("05/03/2020"), y: 1 },
        { t: new Date("05/04/2020"), y: 7 },
        { t: new Date("05/05/2020"), y: 6 },
        { t: new Date("05/06/2020"), y: 4 }
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'series',
        ticks: {
          beginAtZero: false,
          autoSkip: true,
          maxTicksLimit: 10,
          maxRotation: 0,
          responsive: true,
          legend: {
            display: false,
          },
          major: {
            enabled: true
          }
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="90"></canvas>

Leave a comment