I am attempting to create a line chart whose x axis represents time. I am overriding ChartJS' displayFormats to ensure that the full timestamp is shown at each label, but also so that it is of the format I expect.
Here's my code:
var chart = new Chart($('#myChart'), {
type: 'line',
data: {
labels: ['2016-09-05T09:29:06', '2016-10-04T09:29:06'],
datasets: [{
label: 'foo',
data: [1, 4]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
millisecond: 'DD/MM/YYYY HH:mm:ss',
second: 'DD/MM/YYYY HH:mm:ss',
minute: 'DD/MM/YYYY HH:mm:ss',
hour: 'DD/MM/YYYY HH:mm:ss',
day: 'DD/MM/YYYY HH:mm:ss',
week: 'DD/MM/YYYY HH:mm:ss',
month: 'DD/MM/YYYY HH:mm:ss',
quarter: 'DD/MM/YYYY HH:mm:ss',
year: 'DD/MM/YYYY HH:mm:ss'
},
tooltipFormat: 'DD/MM/YYYY HH:mm:ss'
}
}]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"</canvas>
Note that the error in the snippet appears to be introduced by SO and is unrelated to the issue at hand.
When interacting with the chart above, you'll note that the tooltip displays the properly formatted timestamp. So, I believe my suggested formatter is correct and the information is available within ChartJS.
Question:
The x-axis only displays the date of the label. The time portion of the label is dropped and is represented as zeros. Why? How can I show the full time?
I am an idiot.
When representing the x-axis as a time scale the labels go from attempting to 1:1 correspond with a datapoint to broad generalizations of what date/time it is. ChartJS has rounded to the nearest day and thus is at 00:00:00 for time.
Related
Currently, my graph looks as below.
I am trying to change it to Sep 7, if the hour is 24 hours or 00:00.
I tried different formats like
format:'{value:%H:%M}',
or
format:'{value:%H:%M %e %b}',
But not getting the desired result. Could you suggest me what format I should use to make it work?
I was able to resolve this by using the following format.
xAxis: {
type: 'datetime',
opposite: true,
tickPosition: 'inside',
crosshair,
labels: {
y: -8,
},
dateTimeLabelFormats : {
day: '%b. %e',
hour: '%H:%M',
}
},
Now new graph looks like as below.
I've data and chart options coming from Backend. I'm trying to set up charts based on the min/max values provided. Now these min/max values, at times, should match the same as that of the values for chart e.g.,
data : [{x: "Feb '21", y: 302}, {x: "Mar '21", y 123}]
and the options hold :
options: {
scales: {
x:{
max:"Jul '21",
min:"Feb '21",
time: {
unit: 'month',
displayFormats: {
month: MMM 'YY
}
}
}
}
So when it renders the chart, it generates the ticks on x-axis as Feb '01, Mar '01,...,'Jul '01
Can someone please help me understand, why does the default year falls back to 2001?
How can I modify that to accept 2021 by deafult?
This happens only in when the labelFormat is MMM 'YY. The other kind of formats understands that it is 2021.
I'm having trouble parsing Date Times from django in a way that would make chart.js display the data points (as bars) in uneven time intervals that match their distance from one another. Right now the bars are always equidistant from one another. Also I would like to display the time stamps in the format HH:mm.
I've tried 1)
new Date("{{ d.isoformat }}")
which outputs:
Thu May 20 2021 04:28:31 GMT+0300 (Eastern European Summer Time)
and 2)
new Date("{{ d.isoformat }}").toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'})
which outputs
04:28 AM
So I'm probably parsing them incorrectly in charts.js with parser: 'HH:mm', and I don't know how to do it correctly in either case. Both options result in equidistant bars.
HTML/javascript:
var db_labels = [];
{% for d in x_val %}
db_labels.push(new Date("{{ d.isoformat }}").toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}));
{% endfor %}
var graphData = {
type: 'bar',
data: {
labels: db_labels,
datasets: [{
label: 'PM2.5',
data: db_y,
backgroundColor: [
'rgba(73, 198, 230, 0.5)',
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'HH:mm',
format: 'HH:mm',
tooltipFormat: 'HH:mm',
unit: 'minute',
unitStepSize: 15,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
},
}
}]
},
}
}
I get this kind of a graph currently with the above code:
equidistant bar graph
In Chart.js (v2.7.3) I have a line chart containing multiple datasets. I'd like to show the date in the tooltips in 'MMM' format for one of the datasets (which has one point in each month), and 'D MMM' format for all others (which have varying numbers of points per month).
I've tried using a function for tooltipFormat, as shown below:
time: {
parser: timeFormat,
round: 'day',
tooltipFormat: function(tooltipItem, data) {
var f = 'D MMM';
if(tooltipItem.datasetIndex==0){
f = 'MMM';
}
return f;
},
unit: 'month',
displayFormats: {
day: 'MMM',
month: 'MMM'
}
}
However with the above, whenever I hover over a point on any line, I get the following error:
Uncaught TypeError: format.replace is not a function
at expandFormat (moment-with-locales.js:626)
at formatMoment (moment-with-locales.js:611)
at Moment.format (moment-with-locales.js:3351)
at ChartElement.getLabelForIndex (Chart.js:14331)
at createTooltipItem (Chart.js:8354)
at ChartElement.update (Chart.js:8735)
at ChartElement.handleEvent (Chart.js:9097)
at Chart.eventHandler (Chart.js:4704)
at listener (Chart.js:4633)
at HTMLCanvasElement.proxies.(anonymous function) (https://cdn.jsdelivr.net/npm/chart.js#2.7.3/dist/Chart.js:10970:4)
This works just fine, but sets all tooltips to 'D MMM':
time: {
parser: timeFormat,
round: 'day',
tooltipFormat: 'D MMM',
unit: 'month',
displayFormats: {
day: 'MMM',
month: 'MMM'
}
}
But this doesn't work - same 'Uncaught TypeError: format.replace is not a function' error:
time: {
parser: timeFormat,
round: 'day',
tooltipFormat: function(tooltipItem, data) {
return 'D MMM';
},
unit: 'month',
displayFormats: {
day: 'MMM',
month: 'MMM'
}
}
Is it not possible to use a function for tooltipFormat, or am I just doing this wrong?
My line chart has date values like 2016-06-01, 2016-06-01, etc on x axis. According to date range loaded dynamically from json, I want to format it depending on the number of values:
In case of a small amount of values (<= 60 days) I would like to show only day and month (DD-MM) like 01-06, 02-16, etc
In case of a big amount of values (> 60 days) I would like to show only month and year (MM-YY) like 06-16, 07-16, etc.
DD-MM can be achieved like that:
xAxes: [{
type: 'time',
unit: 'day',
time: {
displayFormats: {
day: 'DD-MM',
}
}
}]
MM-YY like that:
xAxes: [{
type: 'time',
unit: 'month',
time: {
displayFormats: {
day: 'MM-YY',
}
}
}]
But I'm quite lost how to combine this two and make it happen on a condition like the number of values. Is there a way to do that with ticks option of scales axis or do I have to write a new scale type?