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,
}
}],
}
}
Related
How to change the width and the color of the x-axis (horizontal axis) in Chartjs? It seems to work using zeroLineColor and zeroLineWidth for the y-axis (vertical one), but it does not work for the x-axis.
If we add:
ticks: {
beginAtZero: true
}
It works as expected, but I don't want the vertical ticks to start from 0.
Is there a way to make this happen?
scales: {
xAxes: [{
gridLines: {
zeroLineColor: 'black', // WORKS
zeroLineWidth: 2 // WORKS
},
display: true
}],
yAxes: [{
gridLines: {
zeroLineColor: 'black', // DOES NOT WORK
zeroLineWidth: 2, // DOES NOT WORK
},
id: 'y-axis-0',
display: true,
ticks: {
// beginAtZero: true // This is what I dont't want to use
}
}]
}
This is the result I get with the previous code:
As you can see, the x-axis is displayed without changes in color or width.
I'm using version 2.9.4 of the Chartjs library.
Go to the .js of the library (in my case: 'node_modules/chart.js/dist/Chart.bundle.js') and, in the line 12202, you will find this conditional:
if (i === me.zeroLineIndex && options.offset === offsetGridLines) {
Transform it into this:
if ((i === me.zeroLineIndex || (!isHorizontal && i === ticksLength - 1)) && options.offset === offsetGridLines) {
Then, do whatever compression or manipulation of the file you need to do to add it to your project.
It's not the best solution, but it's the one I came up with.
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
Is there any way where I can get to see all the labels? All the points are being plotted and the tooltips show the label and the value correctly, but all the labels on the X-axis are not visible.
Yes, there is a way. You need to set autoSkip property to false for x-axis ticks, to show all the labels.
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
},
...
}
I just a newbie to ChartJS,enter image description here
I have 3 questions:
1.How can I make the Y axis only integer? where should I add it?
2.How can I turn off the title which is ""my open case"? I tried it to set it to null but dodn't work?
3.How can I turn off the background grids off? it looks weird
This is my code:
var columnChart = document.getElementById("columnChart").getContext('2d');
var myChart = new Chart(columnChart, {
type: 'bar',
data: {
labels: columnChartLabel,
datasets: [ {
label: 'My Open Case',
data: columnChartNumber,
backgroundColor: "rgba(255,153,0,1)"
}]
}
});
How can I make the Y axis only integer? where should I add it?
You can make the Y axis only integer by setting stepSize property to 1 for ticks in the chart options.
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
}
}
see tick configuration options
How can I turn off the title which is "my open case"?
You can turn off the title (aka Legend) by setting display property to false for the legend.
options: {
legend: {
display: false
}
}
see legend configuration
How can I turn off the background grids off?
You can turn off the background grids by setting gridLines's display property to false for both the x and y axis.
options: {
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
}
see grid line configuration
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ᴏɴ ᴊꜱꜰɪᴅᴅʟᴇ
I want to make a bar graph like this.. is it possible in chart.js?
assuming that OK, Difficult, and Problematic has its own value..
Example:
Problematic = 11 or more
Difficult = 6 - 10
OK = 0 - 5
Yes, like this:
options: {
scales: {
yAxes: [{
ticks: {
userCallback: function(value) {
return value;
},
stepSize: 1
}
}]
},
},
You can also set the step size.