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.
Related
I want to align the y-axis tick labels below the gridLines of linechart in chartJS.
Here's what I've got so far:
But, i want to display same:
My options:
options={{
legend: { display: false },
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
display: false,
gridLines: {
display: false,
drawBorder: false
}
}
],
yAxes: [
{
// display: false,
ticks: {
maxTicksLimit: 4,
// labelOffset: 10,
// display: false
},
pointLabels: {
fontColor: '#E14640',
fontSize: 11
},
gridLines: {
display: true,
drawBorder: false,
color: '#898989',
maxTicksLimit: 3,
borderDash: [3, 5]
}
}
]
},
plugins: {
datalabels: {
display: false
}
}
}}
I'm not able to find any option in the chart options to do such a thing. Please help
Updated: 2019/01/10
I found two solution:
Use chartjs plugin, use chart plugin event then draw text below gridlines
Recommended: get ticks from chartjs (in example: ticks: [0,5,10])
and get height of chart. Create some ticks label (with html) and
append into chartjs (use position: absolute)
ps. sorry, my skill english is very bad!
I am creating a stacked bar graph but I need it to not just add the two vales together and display it.
For example: stackgraph
This graph is supposed to display the "goal" percentage, and actual percentage.
So if the column has a goal value of 70 and a actual value of 30 it will show the color of the actual number from 0-30 then continue the goal color from 30-70.
Is there anyway to actually have them overlap like that and not just total to 100?
You have to add these parameters to your code - enable stacking for X and disable it for Y axis:
xAxes: [{ stacked: true }],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true,
},
}]
Nevermind, I found the answer.
options: {
scales: {
xAxes: [{ stacked: true }],
yAxes: [{
ticks: {
beginAtZero:true
},
stacked: false
}]
}
}
You just need to set the xAxes stacked to true and yAxes to false
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: false,
ticks:{
suggestedMax:50,
suggestedMin:1,
beginAtZero:true,
max:100,
autoSkip:true,
lineHeight:2
}
}]
}
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.
When the label is long, the y-axis is pushed to the left. It left a gap between the y-axis and the bar chart. Is there anyway to close the gap?
var labelList = ["Professional & Disciplinary Knowledge","Curriculum Planning and Instructional Delivery","Learning Environment","Creative Thinking","Problem solving and Critical Thinking","Research Skills"];
var barDatasource = {
labels: labelList,
datasets: [
]
};
var barConfig = {
type: 'bar',
data: barDatasource,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMax: 4
}
}],
xAxes: []
},
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Radar Chart for WM Component Mean',
fontSize: 14,
fontStyle: 'bold'
}
}
};
I'm trying to set my bar chart's y scale so that it shows ticks from 0-100 every 20. However, it does not seem to respecting my options.
My options look like this:
this.options = {
scales: {
yAxis: [{
display: true,
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20
}
}]
}
}
I think it's Axes not Axis:
this.options = {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20
}
}]
}
}