19👍
Once you update to a latest version of Chart.js (currently v2.6.0), in the bar config section, you can set a maxBarThickness
. Doing this will allow you to increase the chart canvas width, without needing to worry about the bar getting larger.
Your options
section would look as following:
var option = {
scales: {
xAxes: [{
maxBarThickness: 100
}]
}
};
JSFiddle: https://jsfiddle.net/dhhnssgc/
See the below documentation for more information about the bar chart configuration options:
http://www.chartjs.org/docs/latest/charts/bar.html#configuration-options
Depending on how you set up the rest of your chart, the barPercentage
and barThickness
options may also work for you.
If you want to move your entire chart away from the edge of the canvas, you can use the layout padding option: http://www.chartjs.org/docs/latest/configuration/layout.html
options: {
layout: {
padding: {
left: 0,
right: 50,
top: 0,
bottom: 0
}
}
}
JSFiddle: https://jsfiddle.net/dhhnssgc/2/
0👍
If someone needs margin from the Y-axe to the chart with time on the X-axe just put the min of X some days earlier. Example:
...
scales: {
xAxes: [{
type: 'time',
time: {
min: moment(new Date()).add(-5, 'days'),
unit: 'month'
}
}]
}
...
- [Chartjs]-Display line chart with connected dots using chartJS
- [Chartjs]-Click events on Pie Charts in Chart.js