We Keep Coding

How to parse "hh:mm:ss" strings to time in Charts.js 3.x

I want to create a timeline using Charts.js.
For this i imported data in the format hours:minutes:seconds like "00:00:10".
When using Charts.js 2.0 one was able to set the parser, which allowed one to import the time values as string.
But after upgrading to Charts.js 3.2.1 the parser option seems to be no longer working.
In the documentation it is stated that one can still use the parser as before.
https://www.chartjs.org/docs/latest/axes/cartesian/time.html#parser
I found multiple forum threads that explained how to do this, but they are done in Charts.js 2.x and are no longer working in my example.
Plot lap times with Chart.js from time strings
Chartjs time in Xaxes
Here is my code. The first example is not going to work because of the script failing with the parser. In the second example you can see the exact same code but without the parser, which is working.
So how can i parse my string data, so that it is formated correctly and the timeline is shown?
Thank you very much for your help.
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Switched",
data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
showLine: false,
fill: false,
tooltip: "Player switched",
borderColor: "#16a085",
backgroundColor: "#16a085"
}
]},
options: {
responsive: true,
scales: {
x: {
type: 'time',
time: {
parser: 'HH:mm:ss',
unit: "seconds",
tooltipFormat: 'HH:mm:ss',
displayFormats: {
'seconds': "HH:mm:ss"
},
unitStepSize: 30
}
},
y: {
min: -1,
max: 13,
stepSize: 1,
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Switched",
data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
showLine: false,
fill: false,
tooltip: "Player switched",
borderColor: "#16a085",
backgroundColor: "#16a085"
}
]},
options: {
responsive: true,
scales: {
x: {},
y: {
min: -1,
max: 13,
stepSize: 1,
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>

In chart.js v3 they removed moment and the adapter so you will need to add both to your script and it should work
Example:
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Switched",
data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
showLine: false,
fill: false,
tooltip: "Player switched",
borderColor: "#16a085",
backgroundColor: "#16a085"
}
]},
options: {
responsive: true,
scales: {
x: {
type: 'time',
time: {
parser: 'HH:mm:ss',
unit: "seconds",
tooltipFormat: 'HH:mm:ss',
displayFormats: {
'seconds': "HH:mm:ss"
},
unitStepSize: 30
}
},
y: {
min: -1,
max: 13,
stepSize: 1,
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#0.1.1"></script>
<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>

ChartJs: HorizontalBar Missing Background Colours

I have the following chart using ChartJs 2.7.3 that is supposed to show a 10yr span in a red bar. For some reason, the background is not applying correctly for that bar (if you hover the chart you still get the correct hover tooltip)
$(() => {
var ctx = $("#Chart")[0];
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['ABC'],
datasets: [{
label: 'ABC',
data: [{
t: '2015-3-15',
y: 10
}],
backgroundColor: 'rgba(255,0,0,1)'
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
min: '2010-1-01',
max: '2030-1-01'
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="Chart" height="50"></canvas>
If I switch the chart type from a horizontalBar to a normal bar, then it works as expected:
$(() => {
var ctx = $("#Chart")[0];
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['ABC'],
datasets: [{
label: 'ABC',
data: [{
t: '2015-3-15',
y: 10
}],
backgroundColor: 'rgba(255,0,0,1)'
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
min: '2010-1-01',
max: '2030-1-01'
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="Chart" height="50"></canvas>
What am I missing for the horizontalBar chart?

I cannot tell why your code is not working but can propose a different approach to solve the problem.
Please have a look at your amended code below. In order to get rid of annoying JavaScript warnings, I use the latest stable versio nof Chart.js (2.3.0).
I included two bars since I expect that the data can be of dynamic size. It should however also work for a single bar. I didn't know however what to do with the y value, this depends on your use case.
$(() => {
var data = [{
l: 'ABC',
t: '2015-3-15',
y: 10
}, {
l: 'XYZ',
t: '2020-11-05',
y: 20
}];
var ctx = $("#Chart")[0];
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
yLabels: data.map(o => o.l),
datasets: [{
label: 'ABC',
data: data.map(o => moment(o.t, 'YYYY-M-DD')),
backgroundColor: ['rgba(255,0,0, 0.5)', 'rgba(0,255,0,0.5)']
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-M-DD',
unit: 'year',
tooltipFormat: 'YYYY/M/D'
},
ticks: {
min: '2010-1-01',
max: '2030-1-01'
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="Chart" height="80"></canvas>

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>

chart.js why are my hover effects not working?

I have a bit of a Problem, i've a little chart with 1440 data Points, and if i display the chart fullscreen, the chart doesn't shows up any hover effects, this includes the tooltips too. If i look at the Chart with open Dev Tools in chrome, all works fine...
Here is my Code:
var chart = new Chart(
ctx,
{
type: 'line',
data: {
datasets: [{
label: 'Temperatur',
borderColor: '#f00',
backgroundColor: '#ff000033',
data: [],
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
minute: 'HH:mm'
}
}
},
{
type: 'time',
time: {
unit: 'day',
displayFormats: {
minute: 'HH:mm'
}
}
}],
yAxes: [{
ticks:{
beginAtZero: true
}
}]
},
backgroundColor: '#011627',
elements: {
point:{
radius: 0,
hitRadius: 5
}
}
}
}
);
if you have any ideas, how i can get the hover effects working, let me know!
Thanks
Edit:
I've figured something out. in one specific resolution, the chart is constantly updating the charts(1471x735) resolution, i've tried different resolutions, and they all work fine..

The hoover effects in your chart work fine, maybe you didn't hoover over any point because they are not visible. I made them visible by commenting out options.elements.point.radius.
Please check your amended code below:
var chart = new Chart('myChart', {
type: 'line',
data: {
datasets: [{
label: 'Temperatur',
borderColor: '#f00',
backgroundColor: '#ff000033',
data: [
{ x: "2018-12-07 08:45:17", y: 12 },
{ x: "2018-12-07 09:30:17", y: 19 },
{ x: "2018-12-07 10:15:16", y: 7 },
{ x: "2018-12-07 11:00:17", y: 15 },
{ x: "2018-12-07 12:15:16", y: 10 }
]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
minute: 'HH:mm'
}
}
},
{
type: 'time',
time: {
unit: 'day',
displayFormats: {
minute: 'HH:mm'
}
}
}
],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
backgroundColor: '#011627',
elements: {
point: {
// radius: 0,
hitRadius: 5
}
}
}
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Bubble Chart in Chartjs not working

I tried implementing the bubble chart as given on the official site of chartjs
http://www.chartjs.org/docs/latest/charts/line.html
but it only displays the grid without any data points.
It also does not show any errors.
Here's the code
var ctx = document.getElementById("myChart");
var data = [{x:10, y:10, r:10}];
// For a bubble chart
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart Js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</head>
<body>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>
</body>
</html>
What am i missing ?

You are defining the data property incorrectly. It should be an object (consist of other properties) not an array.
So, you should use ...
...
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
...
instead of ...
...
data: data,
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById("myChart");
var data = [{
x: 10,
y: 10,
r: 10
}];
// For a bubble chart
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Dataset 1',
data: data
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero: true,
min: -30,
max: 30
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<div class="chart-container" style="height:400px; width:400px">
<canvas id="myChart" width="40" height="40"></canvas>
</div>

The data object should be structured differently.
For instance...
data: {
datasets: [{
label: ["Label"],
data: [{x: 3, y:4, r:5}]
}]
},