Develop Reference

Change Chartjs financial chart yaxis from left to right

Change Chartjs financial chart yaxis from left to the right, tried this code but didnt work:
scales: {
yAxes: [{
display: true,
position: 'right'
}]
}
https://www.chartjs.org/chartjs-chart-financial/

add position right to the first (default) yAxes object in the options
options: {
scales: {
yAxes: [{
position: 'right'
}]
}
}
EDIT: Seems like chartjs financial is working with v3 of the lib. In v3 you have to edit the axis in a different way:
options: {
scales: {
y: {
position: "right"
}
}
}

scales: {yAxes: [{
display: true,
position: 'right',
ticks: {
beginAtZero: false,
max: 2000,
min: 1000,
stepSize: 100
}}]}
scales: { yAxes: [{
display: true,
position: 'right',
ticks: {
beginAtZero: true
},}]}
you can try these two ways, one of the them will work, depends on the your chart.

How to set max/min on x axis to display time range in Chart.js?

How do I set the maximum and minimum to display on the x axis? I'd ideally like it to show just the one 24 hour period.
The chart is initialised with the following options:
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 120,
fontFamily: 'FontAwesome'
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
displayFormats: {
'day': 'HH:mm'
}
},
distribution: 'series',
ticks: {
source: 'data'
}
}]
},
The max/min is set:
chart.options.scales.xAxes[0].ticks.min = dateToday;
chart.options.scales.xAxes[0].ticks.max = dateTomorrow;
Dates are date objects at 00:00 hours.
Graph output is:
Any ideas?
Thanks.

Try this :
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 100
}
}]
It's tested and working for me. you can setup for xAxes as well.

Display all labels in Chart.js

I have a problem with the graphics of CHART.JS. When I put the time interval of 2 years, some labels of the months overlap. I want all the labels to appear, the time interval doesn't matter.
var g = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsHeader,
datasets: listData,
},
options:{
maintainAspectRatio: false,
}
});

Add the following under options:
options: {
scaleShowValues: true,
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}

Some of the properties will be useful.
options: {
scales: {
xAxes: [{
ticks: {
maxRotation: 50,
minRotation: 30,
padding: 10,
autoSkip: false,
fontSize: 10
}
}]
}
}
autoSkip: To show all labels
maxRotation: Rotation for tick labels (Only applicable to horizontal scale)
minRotation: Rotation for tick labels (Only applicable to horizontal scale)
padding: Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
fontSize: font size
Hope this help!
In order to a large number of record needs to plot on fixed-sized view, I would recommend to use Logarithmic Scale.

Updating #fiveelements' answer for Chart.js v3.7.1+:
options: {
scales: {
x: {
ticks: {
autoSkip: false
}
}
}
}

How do you revert xAxes with Chart.js?

For some reason the xAxes of my chart goes from most recent data to oldest date. I obviously want it the other way around / the normal way. How do I revert the xAxes? .. or just the xAxes to act normally with dates.
My chart is here: https://www.betscout.com/tips (Click the Stats tab)
I've already tried this option: https://jsfiddle.net/marineboudeau/4awme3fp/3 - but it doesn't work, not even in the provided example (nothing change when I replace reverse: true with reverse: false.)
I can easily reverse the yAxes this way, so why not xAxes?
Here's some of my JS code:
let chart = document.getElementById('chart');
let myLineChart = new Chart(chart, {
type: 'line',
data: {
labels: grades,
datasets: [{
data: numbers,
label: 'Total profit',
fill: false,
borderColor: '#3771a3'
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
display: true,
color: "rgba(55, 113, 163, 0.18)"
},
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(55, 113, 163, 0.18)"
},
ticks: {
display: true,
reverse: true,
fontSize: 12
}
}]
}
}
});
}

I think it is still being discussed as to why it isn't working, you could do numbers.reverse() and grades.reverse() until it it fixed. fiddle

Removing axes lines on chart.js

I have been working with some Chart.js and I have been trying to figure out how to remove the axis lines on a chart.
You can see the grid lines I am trying to remove in this image.
I have managed to remove the grid lines that appear within the chart where the data is represented, but I am having an issue removing these two lines.
You can see the chart.js I have created for the chart below.
var ctx = document.getElementById("volCause").getContext('2d');
var volCause_Doughnut = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: <?php echo $cause_label_json?>,
datasets: [{
backgroundColor: benefactoGraph_colours,
data: <?php echo $cause_value_json?>
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
},
}],
yAxes: [{
gridLines: {
display: false,
}
}]
}
}
});
Any suggestions would be much appreciated.

You need to set the drawBorder property of grid-lines to false in order to remove those axis lines, like so :
...
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
drawBorder: false //<- set this
},
}],
yAxes: [{
gridLines: {
display: false,
drawBorder: false //<- set this
}
}]
}
...

You can set display: false in your axis object
scales: {
xAxes: [{
display: false,
gridLines: {}
}],
yAxes: [{
display: false,
gridLines: {}
}]
}

The other answers are correct for different versions of chart.js, but as of Jan 2020, with version 2.9.3, I was able to resolve the issue by nesting display: false inside of gridlines as follows:
...
, options:
scales: {
xAxes: [{
gridLines: {
display: false
},
...
Here's a related GitHub issue.