Chart.js hours scale show day switch - javascript

I have an array of date for 2 days and I would like to show only hours. No problem for that.
But since we have 2 days, there is no way to see the day switch in the graph. Is there a way to have hours and then a tick with the day when we are switching ?
Something like that :
Thanks !
var labels = ['2018-12-20 14:00', '2018-12-20 15:00', '2018-12-20 16:00', '2018-12-20 17:00', '2018-12-20 18:00', '2018-12-20 19:00', '2018-12-20 23:00', '2018-12-21 02:00', '2018-12-21 03:00', '2018-12-21 04:00', '2018-12-21 05:00', '2018-12-21 10:00'];
var data = [256,24,14,12,154,123,23,254,145,123,11,255];
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Tickets selling',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 20,
maxRotation: 0,
},
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
}
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>

This can be done using the major ticks option in chartjs.
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
stepSize: 3, // I'm using 3 hour intervals here
tooltipFormat: 'HH:mm',
},
ticks: {
major: {
enabled: true, // <-- This is the key line
fontStyle: 'bold', //You can also style these values differently
fontSize: 14 //You can also style these values differently
},
},
}]
}
This produces an x axis like the follwong

Related

Chart.JS - Set fixed X and Y axis values in time chart?

I'm currently attempting to use Chart.JS to create a line graph, displaying brightness percentages (0-100%) of an LED over 24H.
I'm trying to configure the chart to have set X and Y axis scales.
I need the X axis to display every hour (0,1,2,3... 21,22,23,24), and the Y axis to display values up to 100, going up by 10 (0,10,20... 90,100). I'm unsure how to get it to work. So far I've tried "unitStepSize: 1" and "min: 00:00" + "max: 24:00" as below, but these do not work in the way I had hoped. How can I get this graph to display correctly? Here's my code:
var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);
var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'White',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
format: "H:mm",
unit: 'hour',
unitStepSize: '1',
tooltipFormat: "H:mm A",
displayFormats: {
hour: 'H',
min: '00:00',
max: '24:00',
}
}
}]
},
}
});```
under options / scale try something like this: --> see yAxes
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
...
}

Chartjs not displaying timed data

I'm new to chartjs, but after googling around, i still cannot figure out, why would I not get data charted out. I'm using "parser" attribute to parse string and providing expected display format with min/max values, but no data is shown
var ctx = document.getElementById("canvas");
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["labelA", "labelB"],
datasets: [{
data: ["10:32", "00:12"],
borderWidth: 1
}]
},
options: {
responsive: 'true',
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'm:s',
unit: 'minute',
unitStepSize: 1,
min: '00:00',
max: '20:00',
displayFormats: {
'minute': 'mm:ss'
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>
In my opinion your code looks good and should work. Semantically, however, the use of the timeline is not quite correct. Your bars actually represent durations.
Please have a look at your amended code that works now with durations instead of times:
function asSeconds(value) {
const tokens = value.split(':');
return Number(tokens[0]) * 60 + Number(tokens[1]);
}
function format(seconds) {
return moment.utc(seconds * 1000).format("mm:ss");
}
new Chart('canvas', {
type: 'horizontalBar',
data: {
labels: ['labelA', 'labelB'],
datasets: [{
label: 'My Dataset',
data: ['10:32', '00:12'].map(v => asSeconds(v)),
backgroundColor: ['red', 'blue'],
borderWidth: 1
}]
},
options: {
responsive: 'true',
scales: {
xAxes: [{
ticks: {
min: 0,
stepSize: 60,
max: asSeconds('20:00'),
callback: s => format(s)
}
}]
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => format(data.datasets[0].data[tooltipItem.index])
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>

Formatting x-axis labels as time values in Chart.js

Using chart.js I would like to reformat my bottom chart labels into MM DD format (ie. Feb 2)
How do I get chart.js to recognize the data as dates and convert it?
It comes in like this from my csv file:
2020-02-06
Here is my chart.js coding but it doesn't seem to work.
data: {
labels: dollar.years,
datasets: [
{label: 'Cdn dollar in cents',
data: dollar.vals,
fill: false,
borderColor: '#4BD0B0',
pointRadius: 0,
borderWidth: 8
}
]
},
options: {
legend:{
display:false,
usePointStyle: true,
labels: {
boxwidth:10,
rotation:90
}
},
scales: {
yAxes: [{
gridLines:{
display:true
},
ticks: {
min: .74,
max: .76,
stepSize: .025,
}
}],
xAxes: [{
gridLines:{
display:true
},
ticks: {
labelOffset: 1,
},
}],
}
}
});
}
All you need is to define your xAxis as a time cartesian axis with a 'day' unit.
The default display format of 'day' is 'MMM D' (for instance 'Feb 2').
options: {
...
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
...
}]
}
...
}
Please have a look at the following runnable code snippet:
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: ['2020-02-06', '2020-02-07', '2020-02-08', '2020-02-09', '2020-02-10', '2020-02-11', '2020-02-12'],
datasets: [{
label: 'My Dataset',
data: [0.758, 0.756, 0.755, 0.754, 0.753, 0.758, 0.76],
fill: false,
backgroundColor: 'green',
borderColor: 'green'
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: .74,
max: .76,
stepSize: .005
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Chart.js two y axes line chart tooltip value incorrect for 2nd y axis

I have created a working chart with chart.js and I would like to fix a minor problem I have noticed with it.
Have a look at this pen. or the copy below.
// Global settings for all charts
// set default to not fill any lines
Chart.defaults.global.elements.line.fill = false;
// lines chart with 4 lines and time on x axis
var ChartData = {
labels: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
datasets: [{
type: 'line',
label: 'A',
yAxisID: "y-axis-1",
backgroundColor: "rgba(110,250,150,0.3)",
borderColor: "rgba(110,250,150,0.5)",
data: [2500, 2600, 4100, 3400, 2150, 3560, 4500]
}, {
type: 'line',
label: 'B',
yAxisID: "y-axis-1",
backgroundColor: "rgba(50,255,90,0.3)",
borderColor: "rgba(50,255,90,0.5)",
data: [420, 510, 900, 700, 920, 950, 820]
}, {
type: 'line',
label: 'Wait',
yAxisID: "y-axis-2",
backgroundColor: "rgba(255,000,000,0.3)",
borderColor: "rgba(255,000,000,0.8)",
data: ['00:28', '00:45', '00:15', '00:12', '00:22', '00:55', '00:10']
}, {
type: 'line',
label: 'D',
yAxisID: "y-axis-1",
backgroundColor: "rgba(120,180,255,0.3)",
borderColor: "rgba(120,180,255,0.5)",
data: [4200, 1100, 1300, 1850, 1780, 2440, 3800]
}]
};
var ctx = document.getElementById("Chart");
// declare a chart
var chart = new Chart(ctx, {
type: 'line',
data: ChartData,
options: {
title: {
display: true,
text: "Chart.js line Two Y Axis"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'hh:mm:ss',
unit: 'seconds',
unitStepSize: 3600,
min: '08:00:00',
max: '14:00:00',
displayFormats: {
'seconds': 'HH:mm'
}
},
scaleLabel: {
display: true,
labelString: 'Time'
},
// makes time durations on x axis stay in linier time scale.
distribution: 'linear',
}],
yAxes: [{
id: "y-axis-1",
position: "left",
scaleLabel: {
display: true,
labelString: 'Other Title Here'
}
}, {
id: "y-axis-2",
position: "right",
ticks: {
max: '20:00',
min: '00:00'
},
type: 'time',
time: {
parser: 'mm:ss',
unit: 'seconds',
unitStepSize: 3600,
min: '08:00:00',
max: '14:00:00',
displayFormats: {
'seconds': 'MM.ss'
}
},
scaleLabel: {
display: true,
labelString: 'Wait (mm:ss)',
fontColor: 'rgba(255,0,0,0.8)'
},
type: 'time',
time: {
parser: 'mm:ss',
unit: 'seconds',
unitStepSize: 60,
min: '00:00',
max: '20:00',
displayFormats: {
'seconds': 'mm.ss'
}
},
}]
}
}
});
If you move the pointer over the points on the red line data, you can see that the tooltip shows correct values for all other lines, but instead of the correct value for the red line, it displays the values of the time I have on the x axes. The actual chart line for the red value is in the correct place, only the value in the tooltip is wrong. In this example, the red line is the only line that uses the 2nd y axes on the right, so I assume it's something to do with that.
I did look at this question here but my axes is already set up as time type, assuming I'm following that answer correctly.
How can I correct this?
Note: The x axes times are times in the day from 8AM to 2PM. The times on the 2nd y axes on the right are not times of the day, but lengths of time in minutes.
You have to specify the X axis of each of the Wait data.
Paste it like this in your code:
data: [
{ x: "08:00", y: "00:28" },
{ x: "09:00", y: "00:45" },
{ x: "10:00", y: "00:15" },
{ x: "11:00", y: "00:12" },
{ x: "12:00", y: "00:22" },
{ x: "13:00", y: "00:55" },
{ x: "14:00", y: "00:10" }
]

Disable automatic zoom in on the data

I have a scatter plot with the x axis being the day of the year.
I always want the whole X axis shown, even when I hide dataset A (by clicking on the blue box).
For the Y axis it already works
var ctx = document.getElementById("plot").getContext('2d');
var doyChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: ['2016-01-01', '2016-11-01', '2016-12-01'],
datasets: [{ label: 'A', backgroundColor: 'blue',
data: [{t: '2016-07-08', y: 1},{t: '2016-12-29', y: 1}]
},
{ label: 'B', backgroundColor: 'red',
data: [{t: '2016-11-01', y: 2}]
}
]
},
options: {
scales: {
xAxes: [{ type: 'time',
ticks: { source: 'labels',
/*min: moment("2016-01-01"), max: moment("2016-12-31") */
min: "2016-01-01", max: "2016-12-31"
},
time: {parser: 'YYYY-MM-DD',
displayFormats: {day: 'MMM D' },
stacked: true
}
}],
yAxes: [{ ticks: {
beginAtZero:true,
max: 2,
},
}]
}
}
});
<html>
<body>
<canvas id="plot" ></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
</body>
</html>
My min and max values seem to have no effect at all, I tried as date and as string, to no avail.

Categories