score: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'
}
}]
}
...
score: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/
Source: stackoverflow.com
Related Query
- Increase padding between legend and chart with react-chartjs-2
- Chart.js - Increase spacing between legend and chart
- How to prevent first/last bars from being cut off in a chart with time scale
- chartjs : how to set custom scale in bar chart
- Chart Js Negative Scale
- Increase Chart.js Scale Padding/Margin
- chartjs - top and bottom padding of a chart area
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- How to add padding to the vertical scale (X-axis) in Chart.js?
- set y-axis scale manually in a bar chart using angular-chart.js
- impossible to remove scale from radar chart (chart.js)
- Chartjs: How to create padding between ticks and scale label
- to increase space between x axis and first horizontal bar in chart js
- ChartJS: Remove padding to the right of chart caused by tick labels
- JsPDF and chart.js: Increase chart resolution
- Remove padding from chartJs horizontal bar chart
- how can i modify scale labels in angular chart js?
- Equal distance grouped bar chart irrespective of scale - chart.js
- React chartjs-2 - Increase spacing between legend and chart
- How can I style scale numbers in a Polar Area chart (chart.js)
- Is it able to align line chart at left margin in mixed chart?
- How to increase line chart width in ng2-charts?
- increase the label size of a line chart in chart.js
- Increase space between legend and chart
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Chart.js Polar Area Chart is not scale right
- How to set a time scale to a ChartJS chart from JSON?
- How to increase space between label and chart area in chart.js
- How to select context or scale on chart in chartjs quickchart io to run getValueForPixel?
- How to scale label size radar chart chart.js
More Query from same tag
- Chart.js dataset controller 'null' when chart drawn
- How do I use plugins in ng2-charts?
- How to call a JavaScript file inside a PHP if/else statement?
- HTML5 chart stacked bars with repeated colors
- Chart.js - Draw bar chart with multiple labels
- Why does x axis not increment 'monthly' chart.js. Also, XAxis not taking title
- Chart js - Polar Scatter Chart
- Using Chart.js on Laravel 5.3
- chart.js 3 stacked bar chart - tooltip showing for zero values
- Chartjs and ChartDataLabels does not work in mdb5 pro version 2
- Cannot find module 'chart.js'
- ChartJS AJAX Javascript
- How to add color to text using pluginService for Chart.js?
- Angular ASP.NET Core Chart.js bug on chart rebuild when filtering the list of values
- Canvas width/height not updating on internet explorer
- ChartJS How to set max labels for X axis?
- Using array as data in Chart.js
- Chart.js: chart not displayed from modules despite no errors - JS
- Iterate over query for use in Charts.js using Coldfusion
- Changing chart data dynamically with C# from SQL database
- How can I configure Chart.js in a Electron app?
- Using chart.js inside node.js
- Data with pair X and Y values
- Is there a way to draw floating rectangle using chart.js
- Custom empty screen for ng2-charts
- Chart.js, PHP and JSON loop issue
- Avoid data resetting when toggling series
- chartkick chart.js change colour of axis and colour of axis title
- Django Multiple chartJs chats in a page
- How to prevent empty bars from taking up width in Chart.js bar chart