I want to put ticks on interval day hours, how can I do that?

Chart labels should be just day hours but I have a lot of ticks, when I put just hours, İt doesn't put ticks in interval hours.

/ this exaple I have 24 hours for x axis label but I have 100 data. How can I put this data on 24 hour.

var config = {
    type: 'line',
    data: {
        labels: hourOfDay,
        datasets: _datasets
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Daily Kw Object'
        },
        tooltips: {
            mode: 'label',
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Time'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: _obj.Items[0].ValueType
                }
            }]
        }
    }
};

var ctx =$("#canvas"+_obj.Id)[0].getContext('2d');
window.myLine = new Chart(ctx,config );

I want to put ticks on interval day hours, how can I do that?

Chart labels should be just day hours but I have a lot of ticks, when I put just hours, İt doesn't put ticks in interval hours.

https://jsfiddle/ykm3uvL2/ this exaple I have 24 hours for x axis label but I have 100 data. How can I put this data on 24 hour.

var config = {
    type: 'line',
    data: {
        labels: hourOfDay,
        datasets: _datasets
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Daily Kw Object'
        },
        tooltips: {
            mode: 'label',
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Time'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: _obj.Items[0].ValueType
                }
            }]
        }
    }
};

var ctx =$("#canvas"+_obj.Id)[0].getContext('2d');
window.myLine = new Chart(ctx,config );

• javascript
• jquery
• charts
• chart.js

• Your question isn't very clear. You want only 04 instead of 04:20 ? – ɢʀᴜɴᴛ Commented Apr 12, 2017 at 9:43
• I want to put this 04:20 tick to the 04:00 between 05:00 – Ramazan Zülkarneyn Commented Apr 12, 2017 at 9:51
• umm ok.. is the given image is your expected result or the current state of your chart ? – ɢʀᴜɴᴛ Commented Apr 12, 2017 at 9:56
• this image given my current state, expected result should be 00:00 -23:59 just day hours. – Ramazan Zülkarneyn Commented Apr 13, 2017 at 7:16
• umm... I didn't really get you. what do you mean by day hours? its already in day hours. can you create a demo image of your expected result using paint or photoshop? – ɢʀᴜɴᴛ Commented Apr 13, 2017 at 7:19

2 Answers 2

I solved.İt s working now. https://jsfiddle/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'
    },
}}],
    },
  }
};

Alternative to limit x ticks, you can do this

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