Related
I am trying to plot some data as a scatter plot using Chart.js. I tryed almost everything on the internet and I am still getting the x-axis as shown in the screenshot below. The date format is an interger and I need it a date.
EDIT:
I also find out, when I omit the square brackets for the axis properties, which is teh way described in the documentations, I am getting an error (Uncaught Error: This method is not implemented: Check that a complete date adapter is provided. ). When I used the square brackets for the axis, the properties are not recognised.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
The result I am getting is:
You can use a callback function to alter how the data on the axis is displayed.
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
callback: function(value, index, values){
// do something with value
return value;
}
}
}],
},
};
I found out, where the problem was:
I needed to reference an adaptor for the moment like this and remove the the square brackets for the properties of the axis as shown in the documetnation:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#0.1.2"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: {ticks: {min: 0}},
xAxes: {
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
},
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
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:
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.
Given a label of dates from the pass 9 days and a data set of numbers(2.5,1.5 etc), I want the the numbers/labels at the y-axis to be whole numbers from 1-5 while maintaining the points. What I'm trying to say is I want to have a fixed number of rows in the grid and I'm clueless on how to do it. Can anyone help me?
Current Graph:
Expected Graph:
Option 1/2: stacked
The shortest way:
yAxes: [{
stacked: true,
}]
https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.6,6.7,7.5, 8.6]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: true,
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
Option 2/2: step-size
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size
More control ==> set step size (To 1 in your example):
yAxes: [{
stacked: true,
ticks: {
stepSize: 1
}
}]
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.0,6.7,7.5, 8.6]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: false,
ticks: {
stepSize: 1
}
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
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,
},