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>
Related
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
}
}]
...
}
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>
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>
i want to change Yaxis from real number to integer and here is image, and please help me solve this problem
here is my code
var lineChartData = {
labels: time,
datasets: [{
label: "Số người đăng kí ủng hộ",
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
fill: false,
data: people_isProcessing
}, {
label: "Số người đã ủng hộ",
borderColor: window.chartColors.purple,
pointBackgroundColor: window.chartColors.purple,
fill: false,
data: people_isReceived
}]
};
and here is my option for my chart
window.onload = function() {
var chartEl = document.getElementById("chart");
window.myLine = new Chart(chartEl, {
type: 'line',
data: lineChartData,
options: {
title: {
display: true,
text: 'Kindmate - Chart Static Donate'
},
tooltips: {
enabled: true,
mode: 'index',
position: 'nearest',
custom: customTooltips
}
}
});
});
In your case, you can set stepSize property to 1 for y-axis ticks, to change the y-axis values from float number to integer.
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
},
...
}
ᴅᴇᴍᴏ
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr'],
datasets: [{
label: '# of votes',
data: [1, 2, 3, 4]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
Try this:
window.onload = function() {
var chartEl = document.getElementById("chart");
window.myLine = new Chart(chartEl, {
type: 'line',
data: lineChartData,
options: {
title:{
display:true,
text:'Kindmate - Chart Static Donate'
},
tooltips: {
enabled: true,
mode: 'index',
position: 'nearest',
custom: customTooltips
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
}]
}
}
});
I am trying to draw a line chart with time x-axis. But chart is giving me this error. I want to print the time in a certain format 'hh:mm:ss' but looks like this format is causing some issue. When i send hardcoded labels the chart is drawn correctly.
Chart.min.js:14 Uncaught TypeError: Cannot read property 'call' of undefined
This is my call stack
This is my code
var timeFormat = 'h:mm:ss a';
function newDate(days) {
//return moment().add(days, 'd').toDate();
return moment().add(days, 'm').format(timeFormat);
}
function DrawTrendTempChart() {
var temp_data_trend = {
labels: [newDate(0), newDate(10), newDate(20), newDate(30), newDate(40), newDate(50), newDate(60)], // Date Objects,
datasets: [{
lineTension: 0,
label: 'Trend',
data: [1, 2, 3, 4, 5, 6, 7],
pointRadius: 2,
backgroundColor: ['transparent'],
borderColor: [OrangeRGB],
borderWidth: liveDataLineWidth,
//fill: false,
//borderDash: [5, 5],
}]
}
var temp_options_trend = {
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: timeFormat,
unit: 'minute',
unitStepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}, ],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
},
ticks: {
autoSkip: false
}
}]
},
legend: { display: true },
tooltips: { enabled: true },
showTooltips: true,
responsive: true,
title: {
display: true,
text: "Trend Chart"
}
}
var ctx = document.getElementById("sensorDataTrend").getContext("2d");
myChart = new Chart(ctx, {
type: 'line',
data: temp_data_trend,
options: temp_options_trend
});
}