[Chartjs]-How to minimize x axis labels to day hours in chart js

by

2👍

✅

I solved.İt s working now. https://jsfiddle.net/fLjcan5d/ Thanks moáois for try to understand me.

var config = {
type: 'line',
data: {
labels: ['00:00','01:15', '02:00', '03:20', '04:00', '05:00', 
'06:00','07:00','08:00','09:00','10:00','11:00',
    '12:00','13:00','14:00','15:00','16:00','17:00','18:00','23:59'],
    datasets: [{
      label: "My First dataset",
      data: [1, 3, 4, 2, 1, 4, 2],
    }]
  },
  options: {
    scales: {
      xAxes:[{
  type: 'time',
  time: {
    format: "HH:mm",
    unit: 'hour',
    unitStepSize: 1,
    displayFormats: {
      'minute': 'HH:mm', 
      'hour': 'HH:mm', 
      min: '00:00',
      max: '23:59'
    },
}}],
    },
  }
};

2👍

Alternative to limit x ticks, you can do this

 ticks: {
          autoSkip: true,
          maxTicksLimit: 20,
          maxRotation: 0,
          minRotation: 0,
        },

Leave a comment