Using Chart.js, i want to compare 2 datasets in a timescale. So i send data for each day, but here is my output
As you can see, for the very first and the very last data, i'm not able to see all my barchart. Very first will show the second dataset and very last will show the first dataset.
EDIT
Here is a WORKING CODEPEN
var options = {
legend: {
position: 'bottom'
},
hover: {
mode: 'point',
intersect: false
},
tooltips: {
mode: 'x',
intersect: false,
callbacks: {
title: function (tooltip, data) {
return;
},
label: function (tooltip, data) {
return ;
},
footer: function (tooltip, data) {
return;
}
}
},
scales: {
xAxes: [{
id: 'timescale',
type: 'time',
unit: 'day',
unitStepSize: 1,
time: {
displayFormats: {
'millisecond': 'DD MMMM YYYY HH:mm',
'second': 'mm:ss',
'minute': 'HH:mm',
'hour': 'HH:mm',
'day': 'DD MMM',
'week': 'DD MMM',
'month': 'DD MMMM',
'quarter': '[Q]Q - YYYY',
'year': 'YYYY',
}
},
display: true,
position: 'bottom',
scaleLabel: {
display: true,
labelString: "Heure",
}
}],
yAxes: [{
id: 'consumption',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: "Consommation",
}
}]
}
}
var graph = new Chart(element, {
type : 'bar',
data : {
labels : [],
datasets : [{
label: 'datasets1',
type: 'bar',
backgroundColor: Chart.helpers.color('#0000FF').alpha(0.5).rgbString(),
borderColor: '#0000FF',
unite: null,
yAxisID: 'consumption',
data: [{x: '2017-10-26T22:00:00.000Z', y:73.16},{x: '2017-11-27T22:00:00.000Z', y:36.16}]
},{
label: 'datasets2',
type: 'bar',
backgroundColor: Chart.helpers.color('#FF0000').alpha(0.5).rgbString(),
borderColor: '#FF0000',
unite: null,
yAxisID: 'consumption',
data: [{x: '2017-10-26T22:00:00.000Z', y:87.16},{x: '2017-11-27T22:00:00.000Z', y:24.16}]
}],
},
options : options
});
I've faced the same problem and fixed it by adding offset: true option to scales.xAxes
Here is your code with one new option https://codepen.io/anon/pen/yQqrVz?editors=0010 - now all bars are visible.
And here is my example https://jsfiddle.net/0bnmc4eg/3/
I found the solution in this conversation https://github.com/chartjs/Chart.js/pull/4545
Related
I'm upgrading from Chart.js 2 to 3 and encountering problems with my time chart.
Here's the fiddle: https://jsfiddle.net/58L42w3u/
(I obviously have to put some code in here too:)
var ctx = document.getElementById('myChart').getContext('2d');
var data = [{"x":"2021-06-01","t":null,"o":null}/* more in JsFiddle */];
var chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
{
backgroundColor: 'rgba(50,38,113,0.4)',
barPercentage: 1.0,
categoryPercentage: 1.0,
data: data,
label: 'Total',
parsing: {
yAxisKey: 't',
},
},
{
backgroundColor: 'rgba(59,191,69,0.4)',
barPercentage: 1.0,
categoryPercentage: 1.0,
data: data,
label: 'Occupied',
parsing: {
yAxisKey: 'o',
},
},
]
},
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
x: {
bounds: 'data',
stacked: true,
ticks: {
autoSkip: false,
},
time: {
displayFormats: {
month: 'MMM YY',
},
unit: 'month'
},
type: 'timeseries'
},
y: {
beginAtZero: true,
},
},
}
});
As you can see, the data holds every day from 2021-06-01 to 2021-10-30.
Currently, the x-axis grid lines are displayed in the center of a month and the x-axis labels at the start of a month. I'd like the exact opposite:
The grid line should be before every first of a month and the labels between those lines. I just cannot find a way to manage that.
Are you looking for offset: false?
options: {
scales: {
x: {
grid: {
offset: false
}
}
}
}
false should be the default value according to the docs, but maybe type: 'timeseries' changes this.
Example:
i have a problem when i want to assign output into array string i already use str repace, etc but still not working..
i have output like this (in time)
$grapDate output = 09:00:0001:00:0012:00:0011:00:0010:00:0001:00:0000:00:0023:00:0022:00:00
date('H:i', strtotime($graph['Date'])
and the output become = 09:0001:0012:0011:0010:0001:0000:0023:0022:00
but i want to assign that become e.g $date = ['09:00','01:00', '12:00', etc]
because i want to use graph chart like this in my body
script type="text/javascript">
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart2 = new Chart(ctx, {
type: 'line',
data: {
labels: ['$label'], //Jamnya
datasets: [{
backgroundColor: 'rgba(232,72,163,0.2)',
borderColor: '#e848a3',
label: '29 May 2020',
data: [807,657,600,578,565,576,611,855,625,573,571,584,607,647,771,943,920,647,622,608,722,832,902,1062],
fill: true,
pointRadius: 5,
pointHoverRadius: 10,
showLine: true
}]
}, options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Total Online Yesterday',
position: 'top',
fontSize: 15,
fontStyle: 'bold'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'circle'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TIME'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TOTAL ONLINE'
}
}]
},
tooltips:{
callbacks: {
title: function(tooltipItem, data) {
return '29 May 2020 '+data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return 'TOTAL : '+data['datasets'][0]['data'][tooltipItem['index']]+'';
},
},
titleFontSize: 15,
bodyFontSize: 15,
displayColors: false
}
}
});
</script>
i still thinking how to assign parameter labels in class Chart become ['value', 'value', 'value']
First make each separate & print in JSON format.
$str = "09:0001:0012:0011:0010:0001:0000:0023:0022:00";
$date = json_encode(str_split($str, 5));
I'm using chart.js version 2.7.2 to plot some charts.
The chart is a bar chart, and i'm using a time axis to set the dataset points.
If i use a normal graph the dataset is showed correctly, but if i set the stacked axis, at the first item the render show a strange white space!
Look at the charts, with stacked:false its all ok, with stacked:true there's a strange white space at the first bar!
Is there a way to remove that white space?
Thanks
function newDate(days) {
return moment().add(days, 'd').toDate();
}
const lineData = {
labels: null,
datasets:
[
{
label: 'A',
fill: false,
backgroundColor: "hsl(50, 50%, 80%)",
data:
[
{
x: newDate(1),
y: 12
},
{
x: newDate(2),
y: 15
},
],
},
{
label: 'B',
fill: false,
backgroundColor: "hsl(250, 50%, 80%)",
data:
[
{
x: newDate(0),
y: 23
},
{
x: newDate(2),
y: 34
},
{
x: newDate(3),
y: 45
},
]
}
],
}
const lineOptions = {
type: 'bar',
data: lineData,
options:
{
title:
{
display: true,
text: 'STACKED TRUE'
},
legend:
{
display: true,
},
hover:
{
mode: 'nearest'
},
fill: false,
responsive: true,
scales:
{
xAxes:
[
{
stacked: true,
display: true,
ticks:
{
beginAtZero: false,
},
scaleLabel:
{
display: true,
labelString: "Day",
},
barThickness: 15,
type: 'time',
distribution: 'linear',
bounds: 'ticks',
time:
{
unit: 'day',
unitStepSize: 1,
displayFormats:
{
'day': 'DD/MM',
},
tooltipFormat: 'DD/MM',
}
}
],
yAxes:
[
{
ticks:
{
beginAtZero: true,
},
display: true,
stacked: true,
scaleLabel:
{
display: true,
labelString: "Items",
}
}
]
},
tooltips:
{
mode: 'x',
},
}
}
const chart = new Chart(document.getElementById("chart").getContext("2d"), lineOptions);
const lineOptions2 = {
type: 'bar',
data: lineData,
options:
{
title:
{
display: true,
text: 'STACKED FALSE'
},
legend:
{
display: true
},
hover:
{
mode: 'nearest'
},
fill: false,
responsive: true,
scales:
{
xAxes:
[
{
//stacked: true,
display: true,
ticks:
{
beginAtZero: false,
},
scaleLabel:
{
display: true,
labelString: "Day",
},
barThickness: 15,
type: 'time',
distribution: 'linear',
bounds: 'ticks',
time:
{
unit: 'day',
unitStepSize: 1,
displayFormats:
{
'day': 'DD/MM',
},
tooltipFormat: 'DD/MM',
}
}
],
yAxes:
[
{
ticks:
{
beginAtZero: true,
},
display: true,
//stacked: true,
scaleLabel:
{
display: true,
labelString: "Items",
}
}
]
},
tooltips:
{
mode: 'x',
},
}
}
const chart2 = new Chart(document.getElementById("chart2").getContext("2d"), lineOptions2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<canvas id="chart" width="600" height="400"></canvas>
<canvas id="chart2" width="600" height="400"></canvas>
</body>
https://jsfiddle.net/tgfy6q82/42/
You have both xAxes and yAxes set to stacked:true.
Commenting out stacked:true on the yAxes will do the trick;
function newDate(days) {
return moment().add(days, 'd').toDate();
}
const lineData = {
labels: null,
datasets: [{
label: 'A',
fill: false,
backgroundColor: "hsl(50, 50%, 80%)",
data: [{
x: newDate(1),
y: 12
},
{
x: newDate(2),
y: 15
},
],
},
{
label: 'B',
fill: false,
backgroundColor: "hsl(250, 50%, 80%)",
data: [{
x: newDate(0),
y: 23
},
{
x: newDate(2),
y: 34
},
{
x: newDate(3),
y: 45
},
]
}
],
}
const lineOptions = {
type: 'bar',
data: lineData,
options: {
title: {
display: true,
text: 'STACKED TRUE'
},
legend: {
display: true,
},
hover: {
mode: 'nearest'
},
fill: false,
responsive: true,
scales: {
xAxes: [{
stacked: true,
display: true,
ticks: {
beginAtZero: false,
},
scaleLabel: {
display: true,
labelString: "Day",
},
barThickness: 15,
type: 'time',
distribution: 'linear',
bounds: 'ticks',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'DD/MM',
},
tooltipFormat: 'DD/MM',
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
},
display: true,
// stacked: true,
scaleLabel: {
display: true,
labelString: "Items",
}
}]
},
tooltips: {
mode: 'x',
},
}
}
const chart = new Chart(document.getElementById("chart").getContext("2d"), lineOptions);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<canvas id="chart" width="600" height="400"></canvas>
</body>
Alternatively, since setting yAxes stacked:true should be intended, data can be updated such that there exists data for A and B, even if one of them is 0. https://jsfiddle.net/zqrp0w76/2/
I am using Chart.js 2.x line chart to create a timeline events chart.
It is working well but I can't figure out how to show a tooltip when the mouse goes over a line. The information I want to show is the same shown in the labels (in the example below 'Label A', 'Label B' or 'Label C'. I tried to add the tooltips options enabled = true and mode = label but it doesn't work.
Here is my JSFiddle
Here is my code:
HTML
<div style="height: 250px;">
<canvas id="timeline"></canvas>
</div>
Javascript
var ctx = $("#timeline").get(0).getContext("2d");
var data = {
labels: ['Red','Blue','Yellow'],
datasets: [
{
label: 'Label A',
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2014,01,01),
y: 3
}, {
x: new Date(2017,10,01),
y: 3
}
]
},
{
label: 'Label B',
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2009,01,01),
y: 2
}, {
x: new Date(2012,09,01),
y: 2
}
]
},
{
label: 'Label C',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2017,01,01),
y: 1
}, {
x: new Date(2017,08,01),
y: 1
}
]
},
]
};
var options = {
maintainAspectRatio: false,
legend : {
display : true
},
scales: {
xAxes: [{
type: 'time',
unit: 'month',
unitStepSize: 1,
time: {
displayFormats: {
'month': 'MM/YY',
'quarter': 'MM/YY'
}
},
position: 'bottom',
ticks : {
beginAtzero :true
}},
{
type: 'time',
unit: 'month',
unitStepSize: 1,
time: {
displayFormats: {
'month': 'MM/YY',
'quarter': 'MM/YY'
}
},
position: 'top',
ticks : {
beginAtzero :true
}
}],
yAxes : [{
display: false,
scaleLabel : {
display : false
},
ticks : {
beginAtZero :true,
max : 5
}
}]
},
tooltips: {
enabled: true,
mode: 'label',
},
};
var scatterChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
I had to add the intersect: false property to the tooltips
Updated JSFiddle
Tooltip code:
tooltips: {
enabled: true,
intersect: false,
titleFontSize: 0,
callbacks: {
label: function(tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label || 'Other';
},
}
}
I want to put ticks on interval day hours, how can I do that?
Chart labels should be just day hours but I have a lot of ticks, when I put just hours, İt doesn't put ticks in interval hours.
https://jsfiddle.net/ykm3uvL2/ this exaple I have 24 hours for x axis label but I have 100 data. How can I put this data on 24 hour.
var config = {
type: 'line',
data: {
labels: hourOfDay,
datasets: _datasets
},
options: {
responsive: true,
title: {
display: true,
text: 'Daily Kw Object'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: _obj.Items[0].ValueType
}
}]
}
}
};
var ctx =$("#canvas"+_obj.Id)[0].getContext('2d');
window.myLine = new Chart(ctx,config );
I solved.İt s working now. https://jsfiddle.net/fLjcan5d/ Thanks moáois for try to understand me.
var config = {
type: 'line',
data: {
labels: ['00:00','01:15', '02:00', '03:20', '04:00', '05:00',
'06:00','07:00','08:00','09:00','10:00','11:00',
'12:00','13:00','14:00','15:00','16:00','17:00','18:00','23:59'],
datasets: [{
label: "My First dataset",
data: [1, 3, 4, 2, 1, 4, 2],
}]
},
options: {
scales: {
xAxes:[{
type: 'time',
time: {
format: "HH:mm",
unit: 'hour',
unitStepSize: 1,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm',
min: '00:00',
max: '23:59'
},
}}],
},
}
};
Alternative to limit x ticks, you can do this
ticks: {
autoSkip: true,
maxTicksLimit: 20,
maxRotation: 0,
minRotation: 0,
},