score:2
Accepted answer
inside your variable forecastoptions
, you just need to add the so-called scales
option.
var forecastoptions = {
scales: {
xaxes: [{
barpercentage: 0.7,
categorypercentage: 1
}]
},
tooltips...
this adjusts the width of the bars (barpercentage
) and that of all the bars as a whole (categorypercentage
)
you can change 0.7 to however wide you want it to get. the extra space around all the bars is due to the fact that they fall under the same category, and that option is set to 0.8 as default, meaning that the 5 bars will only take up 80% as a whole.
hope this helps
Source: stackoverflow.com
Related Query
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- Chart js: how can I align the legend and the title
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- How to increase the spacing between labels and the chart
- How do I increase the space between the Legend and the Chart when using angular-chart.js?
- Chart.js - Increase spacing between legend and chart
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Chart is too big. How can I reduce size for the chart in vue js?
- React chartjs-2 - Increase spacing between legend and chart
- How can I have different values for the chart and the tooltip in chart.js?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How can i give the full Legend a background color in chart js?
- Chart.js - Increase spacing between bottom legend and chart
- How can I move chartJs legend left side and change the width and Hight of the chart?
- ChartJS - How to add Text between Pie Chart and Legend
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- How do you create rounded corners on the top and bottom of a bar chart and the between 2 part still draw like image?
- How i can i reduce the borderwidth of a chartjs dougnut chart
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- How to reduce the gap between bars on bar chart
- How to change the color of legend in chartjs and be able to add one more legend?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Increase padding between legend and chart with react-chartjs-2
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How can I sort, insert in between and update full dataset in chartjs?
- How to get the actual chart width and height in chart.js
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
More Query from same tag
- How to position chart details next to a chart responsive for multiple devices?
- How do I present progress in an Angular bar chart?
- Intersection point in line graph in Chart.js?
- In a Stacked Line Chart, is there a way to stack multiple Y-Axes to match each graphed line?
- to increase space between x axis and first horizontal bar in chart js
- Change the color of displayed values in pie chart
- Line chart is not being displayed in Chart.js
- How to only draw the graph and the Xaxis gridlines using chart.js
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- How to make the last item on the chart js active?
- Show multiple charts at HTML page?
- Problem extending data series in Chart.js
- Show base64 image next to canvas with charts.js
- Reusable react component with Canvas doesn't render canvas with its props
- TS how can I use a class variable inside method?
- Charts js and laravel: Render chart after passing in json data
- ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels
- ChartJS custom tooltip doesn't render background on labels (only the title)
- Chart.js 2.0 - vertical lines
- charts.js - custom event using tooltip data (line chart)
- Adding labels and colours to Chart.JS from arrays
- Canvas JS using ajax call
- Create charts with a loop in Django with charts.js
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- Inline plugin doesn't work
- Chart.js (3.7) - Why do the tooltips not appear?
- How do I implement the 'autoskip' feature in chartjs?
- chartJS or/and php print_r not working together
- ChartJS getting an unwanted line between first data point and last data point
- Chart.js how to get Combined Bar and line charts?