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
- Hiding unused axis in ng2-charts
- Chart js 2.x renders the canvas invisible
- Chart.JS change Text Color
- ReactJS - Moving vertical line when hovering over Line chart using chart.js v3.7.1
- Chart.js don't work when I open my app as a stand alone app in Chrome
- Bar labels in Legend
- What is the benefit of front-end framework wrappers for charting libraries (i.e. vue-chartjs, react-chartjs-2...etc.)?
- Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
- How to remove the x-axis showing up for the bottom?
- How to export report as PDF/CSV in ChartNew.js
- zingchart heatmap not show all hours on y axes
- How to clear the data for a angular-chart
- Chart.js (Customising tool tips of a stacked bar to represent each stacked data)
- Why doesn't Chart.js display my output (result of a const function)?
- Send data from php to chart with ajax
- Chart.js different y axis depending on graph from select options
- Styling the middle text of Chart.js's doughnut chart
- ChartJs is not working in angular 4 with no errors
- Chart.js - Plot line graph with X , Y coordinates and connected by line
- impressions in google analytics is zero while sessions and users are more
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- Chart.js zoom start at zoomed in
- chart js graph not showing on canvas
- Chart JS : Display the percentage of labels without getContext('2d')
- Can't get event from chartjs-annotation-plugin on mouseenter
- Chart.js 2.2.x - How to access the pixel coordinate of a point in my dataset
- Chart.JS: How to add Data to a specific dataset
- chartjs not following height when parent's height is 200px
- Chartjs Stacked bar chart not displaying correctly
- How to format the left legend on chartjs