Develop Reference

How can I remove the grid lines in Chart.js

I'm using charts in my react app. I tried using the Scales and gridlines: false option but it is not working from me.
the image shows my code.
Thank you.

You might check a chart.js sample. From there I found some deviations in the object setup of your example
var config = {
type: 'line',
data: {
datasets: [{
// Here starts your snippet
}]
},
options: {
// The options are outside of the datasets property
scales: {
x: {
gridLines: {
display: false
}
},
y: {
gridLines: {
display: false
}
}
}
}
};
Edit 1: updated the scales with the gridLines property

You can use below code to remove gridlines and if you want to enable X and Y axis its useful
gridLines: {
display: true,
zeroLineColor:'white',
color:'transparent'
}

ChartJS - How to increase the maximum degree of label rotation on x-axis?

I have a line chart, and at first, all the labels on x-axis are fully horizontal. Something like this:
Now if add more data, the labels start to rotate:
Until comes a point where it seems to have reached the maximum degree to which it can rotate:
By the looks of it, I think the maximum degree is 45. So now, if I add a little more data, instead of rotating the labels more, it removes every one in two labels, and becomes like this:
How can I increase this degree to 90, so that the labels rotate as much as becoming fully vertical?
Here's the code I used for the chart:
new Chart(chart, {
type: 'line',
data: chart_data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5,
usePointStyle: true
}
},
events: ['click', 'mousemove'],
onClick: clicked,
pan: {
enabled: true,
mode: 'x',
onPanComplete: function(event) {
console.log(event)
}
},
zoom: {
enabled: true,
mode: 'x'
}
}
});

You can configure this using the maxRotation property of the common tick configuration object.
Your code needs to be modified like so:
options: {
scales: {
xAxes: [{
ticks: {
maxRotation: 90
}
}],
yAxes: [{
...

The keyword of the issue is not rotation i think, it is Tick on xAxes.
I think this link can help you :
https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration
also
Chart.js: evenly distribute ticks when using maxTicksLimit
xAxes: [{
ticks: {
autoSkip: false, // Skip or not?
maxTicksLimit: 30 // How much?
}
}]
and rotation just can help as #timclutton said here : https://stackoverflow.com/a/58275468/7514010

Chart.js mixed chart : Lines not starting at zero

current situation
chart
what i want : chart
I build a mixed chart with lines and bars. I have problem with lines.
Lines not starting at zero.
Here is my codes;
https://jsfiddle.net/ameydan/vb4fsyqp/31/
` options: {
legend: {
display: false,
position: 'top',
},
elements: {
point: {
radius: 0
}
},
scales: {
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}
],
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}
]
}
}`
thanks in advance.
beginAtZero : true , not solved problem.

That is cause you setted stacked to true.
scales: {
yAxes: [{
stacked: **false**,
ticks: {
beginAtZero: true
}
}
],
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}
]
}
EDIT:
Second thought coming from => https://www.chartjs.org/docs/latest/charts/mixed.html
At this point we have a chart rendering how we'd like. It's important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the type field.
I found a solution!
Just add this :
myChart.options.scales.xAxes[0].offset = false;
myChart.update();
The only counterpart is that if there's data # index 0 of a bar dataset, it will be only half drawn and the last one as well as shown here : https://jsfiddle.net/0qsh8znu/1/

I had the same issue. When I followed #rOulito 's solution, I found that the lack of offset for my line graph made it no longer line up with the data points of my bar graph, so that didn't work, sadly.
My solution was to follow the docs for a chartjs plugin for annotations
This is how I drew a line from the first data point of my line graph to the bottom left of the graph:
let options = {
plugins: {
annotation: {
annotations: {
line1: {
type: 'line',
yMax: 50000,
xMax: 0,
borderColor: 'black',
borderWidth: 3,
},
},
},
},
};

How can I debug maxTicksLimits in charts.js?

Using maxTicksLimits from charts.js seems to have no effect. There are no errors and my chart renders without error when reloading my page. Other options on ticks work without issue eg.padding: 50 has the intended effect. Below is my code
var chartOptions = options: {
title: {
display: true,
text: 'please help me'
},
scales: {
xAxes: [{
ticks: {
padding: 50,
maxTicksLimits: 5,
autoSkip: true
}
}]
}
}
I have tried using other options to debug and verify there isn't a problem with my code.

I think the problem is in the spelling maxTicksLimits
It should be used like shown in the below code, jsfiddle for your reference -> https://jsfiddle.net/Lhap6suy/
xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 2
}
}]

ChartJS. Change axis line color

I wanna know if it's possible to change the color of the chart axis using ChartJS.
Thanks

I know this question was asked over 2 years ago and the OP has already marked a correct answer, but I have a solution to the problem that the OP mentioned in the comments of the marked answer and I'd like to solve it to save other people some time.
But this changes the color of the axis and all the gridLines, what if
I just want to change the axis color? For example, I want the axis
line solid black and the grid lines grey.
If you're trying to achieve this, then the marked answer won't do it for you but the following should:
yAxes: [{
gridLines: {
zeroLineColor: '#ffcc33'
}
}]

you can change the color by scales configuration under chart options:
type: '...',
data: {...},
options: {
scales: {
xAxes: [{gridLines: { color: "#131c2b" }}],
yAxes: [{gridLines: { color: "#131c2b" }}]
}
}

Good question and good answer from #A Friend
His answer works perfectly well with ....... chart.js v2.xx
Here now for version 3.xx for those interested:
(as v3.xx is not backwards compatible with v2.xx)
Using borderColor instead of zeroLineColor to change the color of the chart axis using Chart.js v3.xx:
scales: {
x: { // <-- axis is not array anymore, unlike before in v2.x: '[{'
grid: {
color: 'rgba(255,0,0,0.1)',
borderColor: 'red' // <-- this line is answer to initial question
}
},
y: { // <-- axis is not array anymore, unlike before in v2.x: '[{'
grid: {
color: 'rgba(0,255,0,0.1)',
borderColor: 'green' // <-- this line is answer to initial question
}
}
}
Following a working snippet with complete code:
const labels=["2021-08-01","2021-08-02","2021-08-03","2021-08-04","2021-08-05"];
const data_1=[39,41,42,43,43];
const data_2=[37,38,40,41,39];
const ctx=document.querySelector('canvas').getContext('2d');
const data = {
labels: labels,
datasets: [{
label: 'Data 1',
borderColor: 'grey',
data: data_1
}, {
label: 'Data 2',
borderColor: 'grey',
data: data_2
}]
};
const options = {
scales: {
x: {
grid: {
color: 'rgba(255,0,0,0.1)',
borderColor: 'red'
}
},
y: {
grid: {
color: 'rgba(0,255,0,0.1)',
borderColor: 'green'
}
}
}
};
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->
<canvas width="320" height="240"></canvas>

In the Charjs.JS to style the scale label and ticks we can use below settings.
options: {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'X axe name',
fontColor:'#000000',
fontSize:10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Y axe name',
fontColor: '#000000',
fontSize:10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}]
}
}
Please refer the link for all the properties. Study all the property before implementation.
Happy coding !

For ChartJs 3 updated in 2022
You can pass the options object when initializing the context. In the sample code I was use x to change the line color on X Axis, you can try y as well.
options: {
scales: {
x: {
grid: {
color: '#777777'
}
}
},