I am trying to display every nth label on the x-axis in Chartjs based on the length of the labels. I saw a similar question: Link but the answer doesn't work for me. I went through the documentation for tick-configuration-options and wasn't able to make it work.
Example code:
const labels = ['11-02-2022', '11-01-2022', '30-01-2022', '11-20-2022']
const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
maxTicksLimit: 3 # Once this works I want to make it conditional i.e. if length == 10 display 10/2
}
}]
},
interaction: {
intersect: false
},
animations:animation,
plugins: {
legend: {
position: 'top',
},
},
};
Would be great if someone can give a little explanation on what exactly I should have checked to fix the problem myself.
See https://www.chartjs.org/docs/latest/axes/labelling.html
basically, you set the ticks value. You use a ternary to decide when to show, e.g.
options: {
scales: {
y: {
ticks: {
// Only show if n'th
callback: function(value, index, ticks) {
return index%3 ? value : '';
}
}
}
}
}
I can't find any documentation on how to change the y axis values from the default ones. The data im plugging into the chart can have any value from 0-150. However, the y-axis starts at 84 and ends at 98. Here's the link to it's npm page. https://www.npmjs.com/package/react-chartjs-2
I would say that what you need is this:
const options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}],
}
}
I am using Chart.js horizontalBar.
I need to start the chart from custom value and not zero or lowest number in data, but could not found any way how to achieve this.
beginAtZero: true // I need this to start not from zero, but from my predefined value.
You can set a Min value and a Max value for every axis, in this case you should set it for xAxes
options: {
scales: {
xAxes: [{
ticks: {
Min: 5,
Max: 10,
}
}]
}
}
You can set also a suggestedMin and a suggestedMax that will be ignored if the dataset data exceed the values
options: {
scales: {
xAxes: [{
ticks: {
suggestedMin: 5, // If the actual min value in your dataset is minor of 5, this property will be ignored
suggestedMax: 10, // If the actual max value in your dataset is major of 10, this property will be ignored
}
}]
}
}
Check the Documentation for more info
I want to create a small graph with just a line.
When I first created I didn't see a big different between the start point and the end point. So I tried to the set the smallest value the same as the min-val. And the biggest value as the max-val on my yAxes.
Here is my code:
var generateNormalChart = function (dataForNormalGraph, randomColors, theLongNameOfTheCoin,currency,exchange,minVal,maxVal,stepsize) {
var ctx = document.getElementById('normalChartGraph' + theLongNameOfTheCoin + currency + exchange).getContext('2d');
var normalChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
fill: false,
borderColor: randomColors,
data: dataForNormalGraph,
pointRadius: 1,
borderWidth: 2
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes:[{
display: false,
ticks: {
max: maxVal,
min: minVal
// stepSize: stepsize
}
}]
}
}
});
};
An example of data I use:
This is the maxVal: 0.0000505
This is the minVal: 0.00005483
This is dataForNormalGraph:
0:0.00005162
1:0.00005124
2:0.0000505
3:0.00005056
4:0.00005089
5:0.0000509
6:0.00005102
7:0.00005067
8:0.00005087
9:0.00005156
10:0.00005173
11:0.00005191
12:0.00005363
13:0.00005276
14:0.00005309
15:0.00005297
16:0.00005231
17:0.00005243
18:0.00005252
19:0.00005271
20:0.00005326
21:0.00005408
22:0.00005483
23:0.00005376
24:0.00005365
Like you can see I commented the step value.
I even tried it with that by calculating the difference between ((the max and min val) / 25) and that was : 1.7320000000000004e-7
I also don't want to see the labels and the Axes value because it takes to much space.
I have 2 photo's like you can see he ignores the max and min val:
What I want but then with the right max and min values
I forgot to give the yAxes values what didn't resulted in a good chart.
The only thing I need to do was to add the
labels: nameOfTheCoins,
so the yAxes have a value
I have a chart that I want to include in my website using Chart.js. In the Y-axis, it gives me real numbers instead of integers. How can I change the number to integers?
Here's a picture of what I have now:
And this is the code:
var lineChartData = {
labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : ["0", "2","1", "0", "1","0","1"]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);
I handled it this way in new version:
new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
}]
}
}
});
I wasn't able to get the existing answers to work for me when using the new version 2 of Chart.js, so here's what I found to solve this problem in V2:
new Chart(ctx, {type: 'bar', data: barChartData,
options:{
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
}
}
});
Try this, where max is the highest value of your data.
var steps = 3;
new Chart(ctx).Bar(plotData, {
scaleOverride: true,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0
});
I know this is an old question now, but in the current version (v2.9.3) you can just set the precision of the y-axis ticks to zero to get integers:
options: {
scales: {
yAxes: [{
ticks: {
precision: 0
}
}]
}
}
As Ben Bloodworth above mentioned, the easier way is adding in options (precision: 0).
Currently working fine in version 3.7.1
options: {
scales: {
y: {
ticks: {
precision: 0
}
}
}
}
Check the Chart.js documentation, in the Global configuration section:
// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
scaleIntegersOnly: true,
If you like to start in a different number than zero, you have to take that into account:
var step = 5;
var max = 90
var start = 40;
new Chart(income).Bar(barData, {
scaleOverride: true,
scaleSteps: Math.ceil((max-start)/step),
scaleStepWidth: step,
scaleStartValue: start
});
Something to note,
There are different versions of Chart.js, and they have different options object. In versions 3 and above, the x and y axis is an object whereas, in versions less than 3, they are defined as an array.
Example,
For version 3 and above,
options: {
scales: {
y: {
ticks: {
precision: 0
}
}
}
}
For version 3 and below,
options: {
scales: {
yAxes: [{
ticks: {
precision: 0
}
}]
}
}
Also, note that the y and x becomes yAxes and xAxex respectively.