Chart.js: Increase spacing between bottom legend and chart

[DanielSiemienas]

Hello Chart.js,

I have charts with legend on bottom and would like to add more space between chart and legend. I'm aware that there exists solution for charts with legend on top but when i try to use it, it adds space below the legend. Do you have any idea if it's possible to do something like that? Here is my stackoverflow question.

Thanks,
Daniel

[azrikahar]

The reason why we are unable to use the same solution is because other properties like margins and paddings are altered after the afterFit() method.

However, there is an unconventional way for you to visibly add a gap between the chart and legend in your case. You can add a title in your chart, position it "bottom" so it's between your chart and your legend, then set the text as an empty string. Here's an example codepen on what I'm talking about. If you want to increase/decrease the size of the gap, you can change the padding value on line 16.

I know this is not the best way to do it, but I do hope it proved useful for you.

[DanielSiemienas]

@azrikahar Thanks 👍 that's a bit of a hack but looks good for my purposes :)

[DanielSiemienas]

Damn i just tested it and the title appears below the legend - codepen. It seems that it's connected to the version of chart.js (2.7.2 instead of 2.5.0). Any idea which setting can move the title above the legend?

[azrikahar]

Ah that's unfortunate. Just did a quick fork and didn't notice it's an older version.

Anyway, as I mentioned we have to override the draw function since the value is altered in there. This leads to a solution that I have written in this codepen. If you view the code, it's similar with the version where it increases the height of the legend so there's a space under it. But by overriding the draw function, we can then push the legend downwards while still being visible in the canvas.

TL;DR: change the paddingTop value in line 234 to have granular control over the space between chart and legend. We don't even need the title hack anymore. Cheers

[DanielSiemienas]

Sweet, thanks for your time, the solution looks great 💯

[yairEO]

Pleas consider this similar Stackoverflow question:
Chart.js - Increase spacing between legend and chart

This seems to be in high demand. I myself am completely stuck because the legend is too close the client hates it. I look like an idiots in the eyes of my client saying "I cannot control it".

Now, I don't want no 100+ lines hack just to margin the legend from the data.
Any solution in the near future?

Thanks

[azrikahar]

One way to avoid the redundant 100+ code is to just replace the original code (afterFit and draw) so you have better control on the gap via paddingTop. One constraint of this solution would be you won't be able to use the Chart.js CDN, but this would still be cleaner than having to hack it redundantly.

[yairEO]

@azrikahar - I am using NPM for all 3rd-party code in my React app.
It's not something I would do to manually download a package and include that file somewhere, nobody will approve such a PR on my project and it's also ethically wrong since the file will be out-of-sync with future bug fixes and updates.

Also, nobody will approve a PR on my code for complex 100+ lines of code just for legend margin.

I have 2 options:

1. Hide the original legend and re-create it in HTML+CSS and somehow many the labels clickable to toggle lines on/off.

2. Find another project which has more control over visual aspects

I would like to say that THIS IS EXACTLY why I have been against CANVAS since it's inception.
Canvas is the new Flash. SVG is far superior since you have control over the elements using SCSS and it can basically do everything that this chart does in Canvas.

[icopp]

I ran into exactly this problem, and I find it really bizarre that this issue is closed instead of just making margins around the legend a to-do item.