Image - 1
dates are displayed on the x-axis, values are displayed on the y-axis.
How can I change the interval distance?
You should look at the documentation of chartjs and specifically linear axis:
chartjs documentation
Code Example:
JsFiddle Example
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
Your question is not elaborate enough. Atleast you should have given sample json for the chartjs via which you are plotting. From my understanding this should work :
xAxis: {
ticks: {
maxTicksLimit: 10
}
}
Related
Limit labels number on Chart.js line chart
I want to reduce the number of label of my line chart "Only" when displaying on the small device.
From the post above, the solution is like this;
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 12
}
}]
This is a good solution, but I want to keep all my 24 labels when showing on desktop (lg). I want to hide half of the labels when displaying on phone only (xs) .
This is how my chart on desktop and phone now.
Here is one solution where we check if the the window size is less than 600px and return 12 else the tick limit is 24
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: getTickLimit()
}
}]
function getTickLimit(){
return window.innerWidth<600? 12:24
}
I've got a working not stacked logarithmic horizontal bar chart .I need a copy of this chart where the X and Y-axis-es are stacked(both at the same time).The problem comes when I change the axises to stacked ,than the bars goes off canvas and the values don't fit the grid.(https://i.imgur.com/LH6YTy0.png) - The picture shows the values and the grid at the bottom shows that the datas not fitting the grid values - Is that a bug or am I overlooking something?
The code is a simple a chart declaration, there are 4 datasets I'm working with right now, each looks like this:
{label: "D_number_data", data: Array(11), fill: false, backgroundColor: "#80B300", borderColor: "#80B300", …}
I think nothing is wrong with the datasets or the way I assign them to the chart,so something must be with the stacked axis-es.
I've tried resizing and changing only one Axis to be stacked,which is also working, but the reason I need both axis to be stacked is that in that way they are not overlapping each other so it's easier to look at it and read the data.
let myChart = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: [],
datasets: [],
},
options: {
labels:'50px',
borderWidth:1,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked:true,
barPercentage: 1,
ticks:{
autoSkip: false,
pointLabelFontSize: '20px'
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.4,
ticks:{
fontColor: 'rgb(0, 0, 0)'},
fontSize:500,
}],
}
}
});
The expected result would be the values fit the values in the grid and the bars stays on canvas.
Found the problem, in my project the data in the dataset object was a string array (something like["1","2","3"]). After parseInt the elements in the data array , the stacked logarythmic bar chart work fine. Funny thing that I created many chart-s with string data arrays using chart.js, and I only encountered this issue in chart-s where the type was set to logarithmic, and both axis set to stacked.
I don't want to rotate the labels of the x axis, so I disabled that behavior by setting maxRotation: 0. Of course, the labels overlap if I scale the chart:
I would like the labels to behave like this:
Is that possible with standard chart.js options? Or is there another way to achieve that?
EDIT: Here is a codepen which shows the behaviour: https://codepen.io/JohnArcher/pen/wmeEMV
Try using autoSkip option on x axes ticks.
xAxes: [{
display: true,
position: 'bottom',
ticks: {
autoSkip: true
}
}]}
https://www.chartjs.org/docs/latest/axes/
A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
If that doesn't resolve your problem try use maxRotation, minRotation.
xAxes: [{
display: true,
position: 'bottom',
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90
}
}]}
https://www.chartjs.org/docs/latest/axes/cartesian/
Is there any way where I can get to see all the labels? All the points are being plotted and the tooltips show the label and the value correctly, but all the labels on the X-axis are not visible.
Yes, there is a way. You need to set autoSkip property to false for x-axis ticks, to show all the labels.
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
},
...
}
I have been using jqPlot for a project I am in and so far I am quite satisfied with it. Is very complete. However, the feature I am working on right now requires an horizontal bar chart. My issue is that my chart currently shows xaxis ticks as decimal numbers increasing by 0.5. I don't need decimal values. I need integers increasing by 1. My config is a little something like this:
var chartConfig = {
seriesDefaults: {
showMarker: false,
shadowAngle: 135,
pointLabels: {
show: true,
labelsFromSeries: true,
seriesLabelIndex: 2,
edgeTolerance: -50
},
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 25,
barPadding: 0,
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
min: 0,
max: 4,
tickInterval: 1
},
yaxis: {
showTicks: true,
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -50,
labelPosition: 'middle'
}
}
}
};
However, looks like jqPlot is completely ignoring the xaxis tickInterval, min and max option values. My output chart looks as follows:
I need to know what I am doing bad here. My config looks to be okay, but I can't get jqPlot to use the values I pass for the X axis. Any help on this matter will be very much appreciated.
Thanks.
I have been having problem with the tickInterval on horizontal bars also. I found that you have to specify both the min and max along with the tick interval for the axis you need it for.
This you have done but I wanted to state this somewhere as I spent a long time trying to find why tick interval wasn't working and this post kept coming up in my searches so hopefully it will help others.
For your issue, is possibly something to do with your data sets.
If this is still causing you problems maybe post the full script with your values as the code is only partial atm.
Thanks
Richard