I have created a line chart in chart.js that plots data from financial markets.
How can I control the width of the gridlines from the x axis?
The data is time based and when the chart starts the space between the gridlines is too big.
As the data is added the chart condenses the space automatically.
I would like to control the spacing to a uniform amount that I can set from the start.
Any help much appreciated.
You can set a maximum number of vertical grid lines (for x axis) :
scales: {
xAxes: [{
ticks: {
maxTicksLimit: 20,
},
}]
},
Might not be the best solution but by setting a fix hight or width you can control the max-space between the gridLines
<canvas id="myChart" width="1200px"></canvas>
Related
I have a chart where I've set a maxBarThickness on my axis. When the chart is populated with a lot of data, the datasets are close together, but when there are just a few data points, the datasets look wide apart.
I have tried setting categoryPercentage to a smaller percentage but when the chart is populated with a lot of data (or on page resize), the chart looks wrong. Any help would be appreciated.
According to this github issue you cannot change the space between bars if you decide to set a barThickness (I assume it does not work when maxBarThickness is set either but I might be wrong, if so I'll delete this answer)
According to the previous link, you have two solutions:
If you want to keep your bar thickness (answer to the github issue):
If you don't want to stretch out the bar to fill the extra space, you have to reduce the width of the canvas.
Otherwise you could set a barPercentage and a categoryPercentage on your chart, without a barThickness or a maxBarThickness:
scales: {
xAxes: [{
categoryPercentage: 0.8,
barPercentage: 0.9
}]
},
Those are the default values.
Related questions :
Chart.js Bar Chart: How to remove space between the bars in v2.3?
CharJS 2.5.0 - How to remove space between bars
Reduce space between ticks in horizontal bar-chart chartJS
I'm using Chart.js to draw graphs and I have an issue:
I would like to increase that distance, because now it looks inaccurately.
Okay, I found the solution:
xAxes: [{
ticks: {
padding: 10
}
}]
I am using the horizontal bar chart from chartjs. Right now my Chart seems to be very big, and the space between the ticks on the xAxis is very high. ( I attached picture of that), can anyone tell me how to reduce this space and scale the chart in total better?
My css properties:
#myChart {
width: 90% !important;
height: 100% !important;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
padding-bottom: 5%;
}
My chart options:
modelChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontSize: 18
}
}],
xAxes: [{
ticks: {
autoSkip: false,
fontSize: 18,
beginAtZero: true
}
}]
},
legend: {
display: false
},
tooltips: {
footerFontSize: 22,
bodyFontSize: 22,
titleFontSize: 18
},
hover: {
animationDuration: 0
}
}
});
If you post your corresponding HTML then I can confirm this, but is #myChart the id of your canvas element or of a div that contains your canvas element?
Chart.js will render the chart such that it fully fills the parent of the canvas element. Even if you set a width property on a canvas element it will still not affect the chart size.
Checkout this codepen example that demonstrates the difference. At the top is a chart contained by a div whose width is set to 40%. At the bottom is the same chart but the canvas element's width is set to 40%. Notice that the second chart still fills the entire window.
So long story short, you should wrap your canvas element in a div and set the div's desired size accordingly to actually change the size of your chart.
Now, let me address your question about changing the space between ticks in your X axis. There is not really a way to truly do this like I think you are wanting to do, because chart.js determines the tick placement by dividing the width of the chart by the number of tick steps (e.g. it always uses the full width of the chart equally).
So one way to decrease the space between ticks is to simply add more ticks (by changing the tick stepSize using the stepSize and fixedStepSize properties). Obviously, in this case, the chart size has not changed. You are just showing more ticks, so the space between them has decreased.
If you want to truly change the distance between ticks, then the only way is to decrease the width of the chart. But by default, the height of the chart will decrease along with the width because the maintainAspectRatio property is defaulted to true.
So if you want a narrower chart (but still want the chart to be large) then I would advise you to set the maintainAspectRatio property to false and manually set the height and width of your chart's parent div.
Checkout this codepen that gives an example of each of the tick spacing concepts that I discussed.
The first chart is the baseline, the second chart adds more ticks (thus decreasing the tick spacing), and the third chart changes the aspect ratio so the chart is still large but narrower (therefore the distance between ticks is reduced).
Try using chartArea: {width: '30%'}. Adjust percentage as per requirement. It will compress the width of the chart. Just a thought !!!! I used in horizontal bar graphs to adjust my graph size.
I am using Chart.js as my charting library. I have created horizontalBar chart.
I need to set the width of individual bar in the chart.
I did not found anything specific in chartjs documentation but while looking at source code I found the option barThickness which is setting the fixed bar width
But as number of rows increase, instead of increasing the height of the chart, the bar are colliding with each other. Please check fiddle for example:
https://jsfiddle.net/orhp0zLg/
Is there any way we can increase the height of the chart instead of letting the bars collide with each other?
The barThickness property is a fixed width, as you noticed in your issue.
However, you have an other property called barPercentage which is a multiplier of the max width of your bars.
You should set berPercentage to a value (let's say 0.95) and you'll always have the same format, no matter how many bars you have :
options: {
scales: {
yAxes: [{
barPercentage: 0.95,
}]
}
}
Here is your updated fiddle with the fix and here are the results with first 7 values and then 12 :
I'm using a Chart.js beta 2 line chart. I'd like my x axis labels not to rotate, because it messes up my layout. I'm setting the options to have the ticks.maxRotation property set to 0. When I do so the labels are not skipped properly, but overlap instead.
this.options = {
scales: {
xAxes: [{
ticks: {
maxRotation: 0
}
}]
}
};
I also tried providing a ticks.userCallback to only show certain labels and skip myself, however I found doing this not only removes the label from the xAxis display, but also from the tooltip. I always want the tooltips to display the label.
So, what is the best way to keep labels oriented at 0 rotation and not have them overlap ?