0
336
ViewsResize Chart Independently From Legend in ChartJS for Canvas Download
Some of the charts created and downloaded by my application have the potential to have very large legends. When this is the case, the idea is to create (ideally via ChartJs - as is the case with the associated chart) and download a dedicated canvas/image showing the full legend for the chart.
So far, I have been able to "hide" the chart by setting the scales to display: false e.g.
options: {
scales: {
x: {
display: false
},
y: {
display: false
}
This successfully prevents the chart from showing, but the canvas still seems to allocate half the real-estate for the chart e.g.
Is there any way I can make the space for the chart smaller (or even disable it from showing at all!) allowing more space for the legend?
Playground here: https://jsfiddle.net/ShallDev2018/7bdnjsw9/16/
NOTE: HtmlLegend is not an option here as the sole purpose of this canvas is for downloads.
1 answers
Answer question0
After some more tinkering, I have found the solution to the problem.
As it happens, ChartJs sets a default max-width for the legend (although it doesn't specify this in the documentation). By setting legend max width to a high value, the legend can assume the whole canvas e.g.
legend: {
position: 'left',
align: 'start',
fullSize: false,
labels: {
font: {
size: 12
},
padding: 10
},
maxWidth: 9999
}