I've finally managed to slog through the migration guide, but a couple things are still broken.
For this question: How can I force a labeled tick line for the max on the y-axis (in this case “16.1”). Looking at this example from an unrelated question, it seems like this is only an issue with log scale graphs (the whole reason I'm trying to migrate to v3 is a different bug in log scale graphs in v2...)
v2 (good):
v3 (bad):
This will be fixed with the upcomming release of chart.js V4, the tick calculation has undergone some refinement in this pr: https://github.com/chartjs/Chart.js/pull/9166
Result:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
x: {
},
y: {
type: 'logarithmic',
min: 2,
max: 19
}
}
}
});
<script src="https://www.chartjs.org/dist/master/chart.umd.js"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
I'm trying to create a chart.js scatter plot with a set of points with values of 0 to 100 percent. I'd like to have 0 be a red point and 100 be blue and have a gradient between the two. I'm able to get the colors I want, but is it possible to get labels for just a few points like 0, 25, 50, 75, and 100? I don't want a label for all 101 possible values just enough for users to understand that it's a spectrum.
I considered trying to add two datasets to the chart one for the real data with no labels and another with not data but the five labels I want. Would this work?
Yes, you can specify the ticks you want with the afterBuildTicks hook. You can also specify the count property in the ticks this will make it so chart.js generates that many ticks but you dont have control over the values of those ticks:
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
x: i,
y: i
})
}
const options = {
type: 'scatter',
data: {
datasets: [{
label: '# of Votes',
data: data,
borderColor: 'orange',
backgroundColor: 'orange'
}]
},
options: {
scales: {
x: {
afterBuildTicks: (a) => (a.ticks = [{
value: 0
}, {
value: 25
}, {
value: 50
}, {
value: 75
}, {
value: 100
}]),
ticks: {
count: 5, // limit to 4 ticks but let chart.js decide what tose ticks are
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>
I am drawing a bubble plot with Chart.js. Sometimes the big bubbles happen to be near the edge of the plot and get truncated. Therefore I've tried to extend the axis limit beyond the data range. The idea is like this
min_x_axis = min_x_data - (max_x_data - min_x_data) * 0.1
max_x_axis = max_x_data + (max_x_data - min_x_data) * 0.1
I do the same for the y axis. In general it works but by extending the axis 10% in each direction, the plot looks ugly. For example, before the ticks of x axis are 1,2,3. After I extend the axis, the ticks are something like this 0.87, 1, 2, 3, 3.12 which makes the plot look kind of ugly due to unevenly spaced gridline. Is there any way I can extend the tick of an axis 1 step in each direction, in this case the ticks will be 0,1,2,3,4.
The range of this plot's data changes dramatically depending on the user input so there is no way to know the tick step beforehand.
You can make use of the grace option like so:
var options = {
type: 'bubble',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 3,
r: 4
}, {
x: -3,
y: 1,
r: 38
}, {
x: 16,
y: -4,
r: 18
}],
backgroundColor: 'pink'
}]
},
options: {
scales: {
x: {
grace: 1
},
y: {
grace: 1
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>
Grace documentation: https://www.chartjs.org/docs/master/axes/cartesian/linear.html#grace
so I'm basically pulling my hair as I can't get this to work for hours straight.
I'm trying to do a (I assumed simple) line-graph with on the x-axis time of day in hours and on the y-axis number of views. I'm trying to set the x-axis range as -24 hours until now.
My code is as follows. What am I doing wrong?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: '# of Votes',
data: [{x:'1619701200',y:41},{x:'1619704800',y:9},{x:'1619708400',y:21}]
}]
},
options: {
scales: {
x: {
type: 'time',
min: Date.now() - (24 * 60 * 60 * 1000),
max: Date.now()
}
}
}
});
</script>
EDIT: the problem is that the x-axis doesn't extend to 24 hours prior to now(). Also, there are 3 values in the dataset, but only two are shown. You can even edit the x-values to whatever you want and the entire graph stays the same.
EDIT2:
Could someone help me get this right? I've pasted my data below:
What I am trying to achieve:
X-axis going from now until 24 hours prior with an interval of 1 hour between ticks, formatted as 'd-m-Y H:00:00'. The data now is in seconds since epoch, if I need to change that please let me know!
Y-axis going from 0 to whatever the max is in the dataset
What CDNs do I have to include? I find the documentation on chart.js, moments, adapters etc quite unclear and everything I find on the internet is for prior versions.
Thank you!!
<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>
<script>
new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: ['1619701200','1619704800','1619708400','1619715600','1619719200','1619722800','1619726400','1619730000','1619733600','1619737200','1619744400','1619773200','1619780400','1619784000','1619787600','1619791200','1619794800','1619798400','1619802000','1619809200','1619812800','1619816400','1619820000','1619823600','1619856000'],
datasets: [{
data: [41,9,21,80,277,151,68,88,82,48,12,1,97,36,81,21,63,49,44,15,10,44,81,4,9],
label: "Views",
borderColor: "#3e95cd",
fill: false
},
{
data: [1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,1,1],
label: "Visitors",
borderColor: "#3e95cd",
fill: false
}
]
}
</script>
We want you to keep your hair :-)
Try the following 2 Options for latest version of Chart.js
Chart.js v3.2.1 (not backwards compatible with v2.xx)
Option 1:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
// gets you the latest version of Chart.js, now at v3.2.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/chartjs-adapter-moment"></script>
// You need moment.js and adapter for time or timeseries to work at x-Axis
<div style="width: 500px; height: 500px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<script>
const startDate = new Date(1619701200*1000);
// first label from your data, times 1000 to get milliseconds,
// for last 24 hours from now, see further down below
const myLabels = [];
let nextHour = startDate;
let i = 0; // tip: declare i outside for-loop for better performance
for (i; i < 24; i++) {
nextHour = new Date((1619701200 + (i*3600)) *1000);
myLabels.push(nextHour);
};
const ctx = document.querySelector('canvas').getContext('2d');
const myChart3x = new Chart(ctx, {
type: 'line',
data: {
labels: myLabels,
datasets: [{
data: [41,9,21,80,277,151,68,88,82,48,12,1,97,36,81,21,63,49,44,15,10,44,81,4,9],
label: "Views",
borderColor: "#3e95cd",
fill: false
},
{
data: [1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,1,1],
label: "Visitors",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
scales: {
x: {
type: 'timeseries',
time: {
unit: 'hour', // <-- that does the trick here
displayFormats: {
hour: 'D-M-Y H:00:00'
},
tooltipFormat: 'D-M-Y H:00:00' // <-- same format for tooltip
}
},
y: {
min: 0
}
}
}
});
</script>
And this is what your chart would look like:
If you want to calculate dynamically the last 24 hours from now for your x-Axis, I would suggest to use moment.js instead:
<script>
// ...
const startDate = moment().subtract(1, 'd');
const myLabels = [];
let nextHour = startDate;
let i = 0;
for (i; i < 24; i++) {
nextHour = moment().add(i, 'h');
myLabels.push(nextHour);
};
// ....
</script>
Also, be aware that moment.js uses slightly different formatting string:
'D-M-Y H:00:00' instead of 'd-m-Y H:00:00'
Option 2:
If you have your data in json-format
data: [{x:1620237600000,y:41},{x:1620241200000,y:9},{x:1620244800000,y:21}]
like your first code snippet on top, using min and max at x-Axis: (Advantage: you don't have to define labels-array for x-Axis)
<script>
const ctx = document.querySelector("canvas").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: "Views",
data: [{x:1620237600000,y:41},{x:1620241200000,y:9},{x:1620244800000,y:21}]
// x-value without quotes (has to be a number)
// and multiply by 1000 to get milliseconds
},
{
label: "Visitors",
data: [{x:1620237600000,y:1},{x:1620241200000,y:1},{x:1620244800000,y:2}]
}]
},
options: {
scales: {
x: {
type: "time", // <-- "time" instead of "timeseries"
min: Date.now() - (24 * 60 * 60 * 1000),
max: Date.now(),
time: {
unit: "hour", // <-- that does the trick here
displayFormats: {
hour: "D-M-Y H:00:00"
},
tooltipFormat: "D-M-Y H:00:00"// <-- same format for tooltip
}
},
y: {
min: 0,
max: 100
}
}
}
});
</script>
You should get the following:
I hope I understood correctly your need and hope this helps.
It needs more settings, I've searched and by trial/error - credit to this jsfiddle - , these are the results.
See updated working jsfiddle:
/*
Source: https://jsfiddle.net/microMerlin/3wfoL7jc/
*/
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: '1619701200',
y: 41
}, {
x: '1619704800',
y: 9
}, {
x: '1619708400',
y: 21
}]
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
min: Date.now() - (24 * 60 * 60 * 1000),
max: Date.now(),
type: "linear",
position: "bottom",
//stacked: true,
ticks: {
//beginAtZero: true,
userCallback: function(t, i) {
/*console.log("t: " + t.toString());
console.log("i: " + i.toString());*/
return i;
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>
Sometimes chart value is the same height as chart height. For example im my picture red bar is 6, the same as y-axis top number. Can I add some buffer so chart bar never reaches top of y axis? Lets say y axis would go to 7 now (or similar).
Image show my problem (open image in new window for better view)
By Axis Range Settings
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings
suggestedMax: 7
1/2. Static max value example
Change min to 10 and max to 90 (For data[30, 40, 50, 60]).
let chart = new Chart(ctx, {
type: 'line',
responsive: true,
data: {
datasets: [{
label: 'First dataset',
data: [30, 40, 50, 60]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 10,
suggestedMax: 90
}
}]
}
}
});
<canvas id="ctx" width="800" height="350"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
2/2. Dynamic "buffer"
First no one solution for this idea (The max value related to your data structure). For the most basic data structure (Flat), this is one solution:
Get the max value of [20,40,60, 80] ==> 80
updateScaleDefaults Change max y-axis to max + buffer (20 in this example)
updateScaleDefaults - The default configuration for a scale can be easily changed using the
scale service. All you need to do is to pass in a partial
configuration that will be merged with the current scale default
configuration to form the new default. https://www.chartjs.org/docs/latest/axes/#updating-axis-defaults
Example:
For data: [20,40,60, 80]
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [20,40,60, 80]
}]
};
/* buffer trick */
var buffer = 20;
const dataSet = data.datasets[0].data;
console.log("data: " + dataSet);
/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max */
var maxDATAvalue = Math.max(...dataSet);
var maxValuePlusBuffer = maxDATAvalue + buffer;
console.log("max value(" + maxDATAvalue + ") / Plus Buffer(" + maxValuePlusBuffer + ")");
/* The default configuration for a scale can be easily changed using the scale service. */
/* https://www.chartjs.org/docs/latest/axes/#updating-axis-defaults */
Chart.scaleService.updateScaleDefaults('linear', {
ticks: {
max: maxValuePlusBuffer
}
});
var options = {
responsive: true,
title: {
text: 'Set max value to max(data) + Buffer',
display: true
},
scales: {
xAxes: [{
stacked: true,
ticks: {
},
}],
yAxes: [{
stacked: true,
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart" width="800" height="350"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
Related Stackoverflow Q:
How to set max and min value for Y axis
ChartJS: How to set fixed Y axis max and min