Update plugin.legend.js with a new option: 'alignment'.

[Zmimmy]

The position options for the legend only allow top, bottom, left, and right. Then the legends are aligned in the center on the top and bottom and at the top in left and right.

This adds a new option to the legend: 'alignment' which allow the legend to be aligned within its layout box.

In the case of position top or bottom, the legend can be aligned 'left', 'right', or 'center', with center being the default. For position right or left the legend can be aligned 'top', 'center', or 'bottom', with top being default as the current behavior.

Updated the legend help page to reflect these changes.

Similar: #3706

See: http://jsfiddle.net/pdht9ces/10/

[etimberg]

@Zmimmy that's for this MR. I've left a few comments about the position computations that allow the code to handle some more cases. Additionally, what kind of tests do you think would be appropriate for this feature?

[simonbrunel]

@Zmimmy Thanks!

Before reviewing, I would like to align the API with the one in this comment:

• rename legend.alignment by legend.align
• rename left, center, right by start, center, end
• rename top, center, bottom by start, center, end

No need to implement stretch of course because it would be more complex.

[nagix]

We also need additional logic in

Chart.js/src/plugins/plugin.legend.js

Line 441 in d6ac7d8

x = cursor.x = me.left + ((legendWidth - lineWidths[cursor.line]) / 2) + labelOpts.padding;

and

Chart.js/src/plugins/plugin.legend.js

Line 445 in d6ac7d8

y = cursor.y = me.top + labelOpts.padding;

to reset x or y position based on the alignment configuration.

[nagix]

I'm assuming the following default row/column alignment, which needs to be considered in case of more than one row/column, but does this make sense?

• position: 'top' or 'bottom'
  • align: 'start' -> Each row is aligned to the left
  • align: 'center' -> Each row is aligned to the center
  • align: 'end' -> Each row is aligned to the right
• position: 'left' or 'right'
  • align: 'start' -> Each column is aligned to the top
  • align: 'center' -> Each column is aligned to the middle
  • align: 'end' -> Each column is aligned to the bottom

[Zmimmy]

Thanks for all the feedback! We just started using chartJS and I am not super familiar with the codebase yet so I appreciate all the insight. I will start making those changes this afternoon.

[Zmimmy]

I have made the changes and added test cases.

I'm assuming the following default row/column alignment, which needs to be considered in case of more than one row/column, but does this make sense?

• position: 'top' or 'bottom'

  • align: 'start' -> Each row is aligned to the left
  • align: 'center' -> Each row is aligned to the center
  • align: 'end' -> Each row is aligned to the right

• position: 'left' or 'right'

Yes, this makes sense and is now happening.

• align: 'start' -> Each column is aligned to the top
• align: 'center' -> Each column is aligned to the middle
• align: 'end' -> Each column is aligned to the bottom

This also makes sense but is not currently happening exactly like this when there are multiple columns, all the columns default to the top of the legend container.

[michvllni]

Any update on this? I'd really appreciate this feature.

[baradhili]

Checking @Zmimmy did you get a chance to remediate?

[YonathanB]

Waiting for that feature :)

[simonbrunel]

@Zmimmy Thanks for your contribution! We decided to go with #6141 since the implementation is a bit simpler and consistent whatever the legend orientation.