Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Legend Padding #6544

Closed
RobTables opened this issue Sep 30, 2019 · 8 comments
Closed

Legend Padding #6544

RobTables opened this issue Sep 30, 2019 · 8 comments

Comments

@RobTables
Copy link

RobTables commented Sep 30, 2019

I have been having an issue with my chart legends when trying to add padding.

I am hoping for a feature that allows for more than just padding between the items in the legend. Something like:

  legend: {
    paddingLeft: 10, //suggested; also paddingRight, paddingTop, paddingBottom
    labels: {
      padding: 50 //current
    }
  },

At least in my case this would prevent having to create the legend as a separate object.

@jianjunhua
Copy link

it can set the padding for legend?
i have try to set paddingTop,but it's not OK

@intoxopox
Copy link

Really hoping for a simple way to set padding between whole legend itself and the chart somewhere in Chart.defaults.global.legend.

@satoshisound
Copy link

This would be helpful for me as well.

@monab
Copy link

monab commented Sep 6, 2021

I would like to add some space between top-left aligned legend and chart. Is it possible?

@fsdkarthik
Copy link

fsdkarthik commented Feb 14, 2022

Implementing the above suggested enhancement as soon as possible would be beneficial to us as well.
Currently, we cannot adjust the padding top, but we can adjust the padding bottom.
chart.legend.fit = function () {
...
this.height += chartDimension.legendHeight;
};

@methnen
Copy link

methnen commented Feb 15, 2022

Another vote for this one.

The example @fsdkarthik gave works in some cases but it's very much a hack. Ideally we'd have the ability to set padding similar to how it works for the overall chart padding in layout:

https://www.chartjs.org/docs/latest/general/padding.html#top-left-bottom-right-object

@RVXD
Copy link

RVXD commented Nov 1, 2022

Please implement this:
legend.padding.left
legend.padding.top
legend.padding.right
legend.padding.bottom

@dangreen
Copy link
Collaborator

dangreen commented Nov 7, 2022

Hi guys. If you want to customize the legend visually, please use an HTML legend. Due to Chart.js using canvas, we can't implement every requested feature cause this will bloat the code.

@dangreen dangreen closed this as completed Nov 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants