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 );
Share
Improve this question
edited Apr 13, 2017 at 8:14
Ramazan Zülkarneyn
asked Apr 12, 2017 at 9:17
Ramazan ZülkarneynRamazan Zülkarneyn
1531 gold badge4 silver badges15 bronze badges
7
-
Your question isn't very clear. You want only
04
instead of04: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
Reset to default 2I 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,
},