Develop Reference

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

Chart.js automatic scaling

I've been testing out chart.js for maybe including it in a project. I just have one smallish issue with it. It doesn't scale some datasets properly. I found somewhat similar questions here in SO, but nothing really that would solve my issue.
So this is what my chart looks like with some datasets:
For some reason, the max values (2.2) look ugly as hell. The reason is, that the dataset has a set of three duplicate values in this case (2.2, 2.2, 2.2). I would like there to be some room on top of this series, so that it would look a bit more reasonable.
How do you properly add "padding" on top the the series line? I would like a solution where I could rely on chart.js to find out the max value, and then maybe update that with some padding on the scale(like x + 10). Issue is, that I cant just hard code the min max values, because I can have over 200 different values that can be selected, and they can vary A LOT in scale.
Here is how I render the chart for now:
return new Chart(context, {
type: 'line',
data: {
labels: labels.data,
datasets: dataSets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
ticks: {
beginAtZero: false
},
yAxes: [{
ticks: {
beginAtZero: false
},
id: 'A',
type: 'linear',
position: 'left',
}, {
ticks: {
beginAtZero: false
},
display: displayBAxis,
id: 'B',
type: 'linear',
position: 'right',
}]
}
}
});

This may not be the cleanest way but you can play with it as you see fit.
In short, you need to create a function that finds the max value out of all your dataSets arrays and in yAxes.ticks set max to that functions return value.
More details below
Referencing here first:
data:{
labels: labels.data,
datasets: dataSets //talking about this first
}
Create a function that will go through these arrays and get the max of all arrays. I did it using this but you can do it better I'm sure:
function getMax(){
var max = 0;
dataSets.forEach(function(x, i){
max = Math.max(max, Math.max.apply(null, x.data));
});
return max + 2;
}
Then in your return in yAxes you should be able to have:
ticks: {
beginAtZero: false,
max: getMax()
},

You can find the min and max of your dataset, then add/subtract a percentage of the difference (range).
For example, say you use 1% of the range.
[0.1, 0.2, 0.5] gives (1%)x(0.5-0.1)=0.004, so [min,max]=[0.096,0.504].
[1500, 1800, 3500, 3600] gives (1%)x(3600-1500)=21, so [min,max]=[1479,3621].

How to remove the line/rule of an axis in Chart.js?

I managed to remove all horizontale lines/rules in my chart using this:
scales: {
xAxes: [{
gridLines: {
display: false
}
}]
}
But I also want to get rid of the rule/bar that represents the Y-axis as well. But I want to keep the labels:
Unfortunately I can't find any option for that. I can only remove the whole axis including labels.
I'm using Chart.js 2.3.

I found a way to remove this line. It's actually called the border of the axis and there's an option for it, see "Grid Line Configuration":
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
}
}]
}

This should work
options: {
scales: {
yAxes: [{
gridLines: {
display: false,
}
}]
},
}

This worked for me in version 2.8.0 -
scales: {
yAxes: [{
gridLines: {
tickMarkLength: false,
}
}]
}

In v3 you can do:
options: {
scales: {
y: {
grid: {
drawBorder: false,
}
}
}
}
https://www.chartjs.org/docs/master/axes/styling#grid-line-configuration

The left line is still coming from the x axis grid lines. Changing the 'zeroLineColor' of the x axis to 'transparent' hid it.
xAxes:[{
gridLines:{
zeroLineColor:'transparent'
}}]
Source: https://github.com/chartjs/Chart.js/issues/3950

gridLines: {zeroLineColor: 'transparent'}

this workerd for me
yAxes: [ { gridLines: { display: false, }, }, ],

You can use the scaleLineColor: 'transparent' it will remove the y any x axis

chart.js v2 - how to 'fill' the graph when using time scale

Im creating a chart with chart.js v2 and I have a good working graph which uses a time scaled axis. Now I want to show whole hours in the axis so I set the option like this:
xAxes: [{
type: 'time',
time: {
unit: 'hour',
unitStepSize: 1,
displayFormats: { 'hour': 'H:mm' }
}
}]
This works good but I have gaps at the beginning and end of the graph.
How can I make it fit like this:
Codepen:
http://codepen.io/WilbertE/pen/wzRmWr

You want to use the min & max attributes of the time property :
options: {
scales: {
xAxes: [{
type: "time",
time: {
min: /* Set your min here .. */,
max: /* .. and your max here*/
}
}]
}
}