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,
},
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'm trying to plot a line graph with Chart.js that shows trends from a series of lap times.
This is my (example) Data:
const datetime = ["2021-02-08 15:01:50", "2021-02-08 16:01:50", "2021-02-08 17:01:50"];
const position = ["8", "8", "7"];
const laptime = ["1:32.599", "1:32.300", "1:31.000"];
And here is my chart.js Code:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: datetime, // list of races,
datasets: [{
label: "Lap Time",
fill: false,
data: times,
},{
label: "Position",
fill: false,
data: position ,
}]
},
options: {
scales: {
xAxes: [{
display: true,
type: 'time',
time: {
unit: 'hour',
round: 'hour',
unitStepSize: 1
}
}],
yAxes: [{
display: true,
type: 'time',
time: {
parser: 'm:s.SSS',
unit: 'seconds',
unitStepSize: 1,
displayFormats: {
'seconds': 'm.s'
}
},
ticks: {
min: '1:0.0',
max: '2:0.0'
}
}]
}
}
});
I want to have two Datasets every Hour one representing the Lap Time and the other the Position
This was working when it was a line chart, but I am trying to convert it to a bar chart. The X-axis displays properly with all of the separate date spans and it changes when I select a dataset. However, none of the data is being displayed on the Y-axis. What is the issue?
var ctx = document.getElementById('activityChart');
var timeFormat = 'YYYY-MM-DD';
var StMarySchool = [{x: 1583422868000,y:1.5},{x: 1583510166000,y:1.5},{x: 1583516698000,y:0.75},{x: 1583516698000,y:0.75},{x: 1583568876000,y:3.75},{x: 1583575074000,y:0.75},{x: 1583581331000,y:1.875},{x: 1583585883000,y:1.875},{x: 1583664583000,y:0.375},{x: 1583664583000,y:0.375},{x: 1583693978000,y:1.875},{x: 1583749868000,y:0.75},{x: 1583756595000,y:0.75},{x: 1583789510000,y:0.75},{x: 1583837107000,y:1.125},{x: 1583852507000,y:0.75},{x: 1583852988000,y:0.75},{x: 1583872458000,y:1.875},{x: 1584121049000,y:1.5},{x: 1584172626000,y:3.75},{x: 1584445225000,y:0.75},{x: 1584533992000,y:3.75},{x: 1584538374000,y:1.125},{x: 1584538374000,y:1.125},{x: 1584565055000,y:1.125},{x: 1584783939000,y:1.875},{x: 1585034842000,y:1.875},{x: 1585073536000,y:1.875},{x: 1587468291000,y:0.75},{x: 1588780685000,y:1.875},{x: 1589222744000,y:0.75},{x: 1589560042000,y:1.125},{x: 1592056137000,y:1.875},{x: 1592144769000,y:0.75},{x: 1592299139000,y:0.75},{x: 1592816935000,y:0.75},{x: 1592900043000,y:0.75},{x: 1592909141000,y:7.5},{x: 1593162077000,y:1.125},{x: 1593961268000,y:1.875},{x: 1593961312000,y:1.875},{x: 1594487280000,y:1.875},{x: 1595336470000,y:0.75},{x: 1596191887000,y:0.75},{x: 1596785796000,y:3.75},{x: 1596989721000,y:1.5},{x: 1596989721000,y:1.5},{x: 1596989721000,y:1.5},{x: 1597007626000,y:0.75},{x: 1597139159000,y:0.75},{x: 1597184422000,y:0.75},{x: 1597322300000,y:0.75},{x: 1597341478000,y:1.125},{x: 1597431163000,y:1.5},{x: 1597666257000,y:0.75},{x: 1597857382000,y:1.875},{x: 1598288284000,y:0.75},{x: 1598462641000,y:0.75}];var BagelUniversity = [{x: 1596095822000,y:0.75},{x: 1596966501000,y:0.75},{x: 1597564562000,y:0.75},{x: 1597564562000,y:0.75},{x: 1597765250000,y:0.75},{x: 1598288284000,y:0.75}];var MerighisSavoyInn = [{x: 1597406165000,y:1.875},{x: 1597428169000,y:1.875},{x: 1597681599000,y:1.875}];
var config = {
type: 'bar',
data: {
datasets: [
{label:'Bagel University', data: BagelUniversity, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']},{label:'Merighis Savoy Inn', data: MerighisSavoyInn, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']},{label:'St. Mary School', data: StMarySchool, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']}
]
},
options: {
responsive: true,
title: {
display: false
},
scales: {
xAxes: [{
offset: true,
type: "time",
/*time: {
unit: 'month',
format: timeFormat,
tooltipFormat: 'll',
max:"05/03/2020" ,
min:"26/08/2020",
},*/
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'MMM D'
}
},
scaleLabel: {
display: true,
labelString: 'Date'
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: '$'
},
ticks: {
beginAtZero: true
}
}]
},
}
};
var myChart = new Chart(ctx, config);
I found that every date has to be in the data, regardless if it contains a datapoint.
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/
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