Chart.js - Increase spacing between legend and chart
I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas?
Unfortunately, since there is no config option to handle this the only way you can achieve the desired result is to extend Chart.Legend and implement the afterFit() callback.
Here is a quick codepen showing how to do just that. To change the spacing, just change the value in line 9 (currently set to 50). Also, this of course only works with the legend at the top. Hopefully, the example is clear enough for you to modify in case you want to move your legend elsewhere.
- How can I round close values to one decimal place on y Axis in chart.js
- Radar Chart Color Transition and Border Smoothing Issue
- Combining multiple datasets in chartjs
- ChartJS v4 - Using Points in a line chart will result in all x-values at 0
- Problem with chartjs and react-chartjs-2 in reactjs
- How to have two consecutive points in a line chart be in the same category?
- Chart.js - Where do I find which components should be registered?
- How do I make the y-axis intersect the x-axis at 0 in chart.js
- How to change the label color in chart.js?
- ChartJS Bar chart - Modify legend
- Hide overlapping labels based on smallest value (or other custom logic) in chartjs-plugin-datalabels
- Chart.js Zoom Limits Not Working: Infinite Scrolling Still Possible
- chart js how to fill legend box with colour
- combo-bar-line with differest number of element
- chartjs - top and bottom padding of a chart area
- PrimeFaces chart changes between 12 and 14
- ChartJS: Invalid scale configuration for scale: xAxes
- How to render the coinbase API in stream line chartjs
- How to remove rectangle box next to the legend text in Chart.js
- Chart.js - Increase spacing between legend and chart
- Canvas is already in use even after using destroy() when leave the page and comeback to add data
- Parcel build differs from localhost
- How do we change the position of legend in chart.js-2 react
- Legend label is not showing dash point style, it shows a line instead
- How to change the color of legend in chartjs and be able to add one more legend?
- Rotating labels on lower half of pie chart
- How to hide y axis line in ChartJs?
- I need to format data from a json with chartjs with reactjs to display data with 2 x axes
- How to center the ticks between grid lines in Radar chart?
- Primefaces charts replaced by chartJS?