Chart.js horizontalBar start bars from custom value - javascript

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

Related

How to set values of y axis in react-chartjs-2?

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,
}
}],
}
}

Javascript - How to insert if and else statement inside option specification area of chart.js

I am using chart.js chart on my web page and I need to specify the min and max value of the chart axis. I can easily use the code shown below to specify the minimum and maximum value of the x axis of the chart but...
options: {
scales: {
xAxes: [{
ticks: {
max: 100,
min: 0,
But, I need to have different minimum and maximum value depending on the value of the javascript variable 'Subject'.
So, I need to have the code such as:
options: {
scales: {
xAxes: [{
ticks: {
if(Subject == 'English'){
return "max: 100,";
} else {
return "max: 50,";
}
min: 0
But this code shows "token not valid" error message. How can I correctly insert conditional statement within the javascript option specification area?

Have you tried ternary ?
options: {
scales: {
xAxes: [{
ticks: {
max: (Subject == 'English') ? 100 : 50,
min: 0,

You can write the if statement outside the option, this worked for me:
if(Subject == 'English'){
max1= 100;
} else {
max1= 50;
}
And then:
options: {
scales: {
xAxes: [{
ticks: {
max: max1,
min: 0,

Problems with max and min value of Chart.js [line chart]

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

How change Highchart minimum value

For my highchart, I want to set maximum value of 100 and minimum value of 1.
When I try to code like this, it outputs is 0-100 not 1-100.
If I change or remove max range, it works fine for small values of y.
yAxis: {
min:1,
max:100,
reversed: true,
title: {
text: 'Rank'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},

You can try
chart.yAxis[0].setExtremes(1,100);
http://api.highcharts.com/highcharts#Axis.setExtremes
If it is dynamic data/tick data you can set
startOnTick : false
This problem is discussed here also http://forum.highcharts.com/viewtopic.php?f=9&t=6862

You can force the y-axis to have specific tick intervals using the tickPositioner function in the y-axis e.g.
tickPositioner: function () {
var positions = [1, 25, 50, 75, 100];
return positions;
}
http://jsfiddle.net/cU2md/

Change the Y-axis values from real numbers to integers in Chart.js

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.

Categories