Chartjs-ChartJS – How can I skip certain minutes on the X-Axis

by

0👍

✅

You should define the xAxis as a time cartesian axis. Also you can use property displayFormats according to Display Formats from Chart.js documentation. See Moment.js for the allowed format strings.

To do so, add the following to your xAxis inside the chart options.

xAxes: [{
  type: 'time',
  time: {
    displayFormats: {
      minute: 'DD/MM hh:mm'
    }
  }, 
  ...

Please note that Chart.js uses Moment.js for the functionality of the
time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.

const worldArray = [{ time: 1583593111036, rank: 665 }, { time: 1583593163490, rank: 665 }, { time: 1583593233697, rank: 665 }, { time: 1583594921644, rank: 666 }, { time: 1583595055581, rank: 665 }, { time: 1583595404573, rank: 665 }, { time: 1583596247042, rank: 665 }, { time: 1583598655437, rank: 666 }, { time: 1583600457443, rank: 667 }, { time: 1583601460665, rank: 668 }, { time: 1583602660570, rank: 665 }, { time: 1583604281776, rank: 668 }, { time: 1583605854175, rank: 669 }, { time: 1583606447275, rank: 668 }, { time: 1583607161055, rank: 667 }, { time: 1583607882093, rank: 666 }, { time: 1583608179707, rank: 667 }, { time: 1583609744777, rank: 668 }, { time: 1583609860652, rank: 669 }, { time: 1583610648775, rank: 670 }, { time: 1583613344874, rank: 671 }, { time: 1583613459587, rank: 672 }];
const worldArrayTime = worldArray.map(o => o.time);
const worldArrayData = worldArray.map(o => o.rank);

var worldctx = document.getElementById('worldChart').getContext('2d');
var worldChart = new Chart(worldctx, {
  type: 'line',
  data: {
    labels: worldArrayTime,
    datasets: [{
      data: worldArrayData,
      label: "WORLD",
      borderColor: "#3e95ce",
      backgroundColor: "#3e95ce",
      fill: false
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Taric Ranking'
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          tooltipFormat: 'DD/MM hh:mm',
          displayFormats: {
            minute: 'DD/MM hh:mm'
          }
        },         
        ticks: {
          maxTicksLimit: worldArrayData.length
        }
      }],
      yAxes: [{
        ticks: {
          min: Math.floor(Math.min.apply(Math, worldArrayData) - 2),
          max: Math.floor(Math.max.apply(Math, worldArrayData) + 2)
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="worldChart" height="150"></canvas>

0👍

I decided to use Chartist.js since it offers an easier implementation of moment.js

If you know how to answer the question, i’m still interested tho.

Leave a comment