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 can I show small values in the react chart 2 donut chart?

I am using donut chart. Since there is a lot of difference between the values, I cannot see some values in color on the chart. How can I do that. I will show the values ​​as the text below. It also changes when I click on the color boxes above. But it should look 5 colors I want in the cake
const newData = [11973.57,253.83,17280, 4451.81,154.16]
const options = {
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false,
animation: false,
cutoutPercentage: 80,
layout: { padding: 0 },
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
borderWidth: 1,
borderColor: theme.palette.divider,
backgroundColor: theme.palette.white,
titleFontColor: theme.palette.text.primary,
bodyFontColor: theme.palette.text.secondary,
footerFontColor: theme.palette.text.secondary
},
offset:true
};
https://i.stack.imgur.com/sD3Kz.png

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

Chart.js: Bar chart shows labels, not data

I want to draw a bar plot with chart.js using this code (very simple):
this.plotEnergy = new Chart($('#plotEnergy'),
{
type: 'bar',
animation: false,
data:
{
labels: ["aaa", "bbb"],
datasets: [ {
label: "ijoij",
backgroundColor: '#000000',
data: [2000, 2300]
},
{
label: "ijooijojij",
backgroundColor: '#FF00FF',
data: [1500, 2500]
},
]
},
options:
{
tooltips:
{
mode: 'index',
intersect: false
},
title:
{
display: true,
text: 'Generated energy'
},
responsive: true,
scales:
{
xAxes: [
{
stacked: 'false',
position: 'bottom',
}],
yAxes: [
{
stacked: false,
scaleLabel:
{
display: true,
labelString: 'Energy [kWh]'
},
ticks: {
beginAtZero: true
}
}]
}
}
});
But I get this: The labels are showed correctly, even the y-axis range is correct. But the bars don't show up. I can click on the legends items to make the corresponding data disappear and the y-axis range would adapt correctly.
Anyone has an idea?

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.