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>
Related
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>
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>
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>
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" }
]
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.