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
}
}
}
}
Related
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.
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 plotting a multi-axis scatter plot in which first datasets[0] I have plotted nominal data that is static then I am pushing in second datasets[1] dynamic generated dataPoint{x,y}.
How to access the dynamically generated x-axis after pushing dynamic dataPoint={x,y} in mychart.config.data.datasets[0].data.push(dataPoint), I want to set some scale property of x-axis that is dynamically generated when I pushed some data point, before any data point when datasets[0].data is empty there is no x-axis but when I pushed some data, chartjs dynamically generate x-axis and its range.
var myOptions = {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: false
}
},
{
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: false,
scaleLabel: {
display: true,
labelString: 'x values',
fontSize: 10
},
ticks: {
max: myMax,
min: myMin,
beginAtZero: true,
}
}
]
}
}
var myDataset = {
type: 'scatter',
lineTension: 0,
fill: false,
data: myData,
};
var config = {
type: 'scatter',
data: {
datasets: myDataset,
},
options: myOptions
};
// this configuration is only for the static dataset means this xAxes config shall work only if all dataPoints will be pushed at once.
xAxes: [{
gridLines: {
offsetGridLines: false
}
},
{
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: false,
scaleLabel: {
display: true,
labelString: 'x values',
fontSize: 10
},
ticks: {
max: myMax,
min: myMin,
beginAtZero: true,
}
}
]
But how to access another x-axis that is being generated by chartjs dynamically when pushing dataPoint one by one?
for(i=0;i<100;i++){
config.data.datasets[1].data.push({
x: myX,
y: myY
});
Chart.update();
}
Chart is being updated fine, but I can not access the X-Axis scale that is being dynamically generated by above for loop code.
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
}
}]
}
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'
}
}
};