[FEATURE] Title alignment Left or Right options

[SmashedBird]

In v2 the title options for "position" are top,right,left,bottom.
It would be nice to have an option for textAlign (left, center,right).
Currently, by default textAlign is center.

For exemple, I would like to have my text at the top [position:'top'] aligned to the left [textAlign:'left'] instead of center.

[Jareechang]

@SmashedBird. I am working on this, I will PR soon.

When PR comes in:

We should be able to offer textAlign option with these selections: left, right, center 😄

[etimberg]

@Jareechang in the interests of consistency, is it possible to also support alignment for vertical legends (top, bottom, center). If so, is it possible to use a single enum of values that are direction agnostic?

[Jareechang]

support alignment for vertical legends
Yes, the text alignment will be supported for different positions (top, right, left, bottom). Is that what you mean ?

single enum of values
can you expand on what you mean by single enum of values ?

[etimberg]

Yup, that's what I meant. For the top and bottom positions the text could be left, center, or right but for the left and right positions the options would be top, center, bottom.

For the enum, I was thinking 3 values start, center, end that would translate as follows

Value	Title Position	Alignment
start	top / bottom	Left
start	left / right	Top
center	*	center
end	top / bottom	Right
end	left / right	Bottom

[Jareechang]

ah I see, thanks for expanding. That makes sense. I'll need to come up with a strategy for checking title Position with the enums.

[Jareechang]

hey @etimberg, looking over the enum values, I am having a difficult time implementing it with those values.

the position alignment is based on unique X and Y value for vertical or horizontal positions.

Alternatives

1. Add more enum values
May I suggest expanding values to include a new category of positions (Vertical or horizontal):

Value	Title position	Alignment
start_vertical	top / bottom	Left
start_horizontal	left / right	Top

....

positions: start_horizontal, start_vertical, end_vertical, end_horizontal

2. Nested K-V pairs
This is an example, but i'll most likely write this in a module with public methods for matching vertical or horizontal.

var positionToAlignment = {
    vertical: {
        top: {
            x: ...,
            y: ...
        },
        bottom: {
           ...
        },
        center: {
            ....
        }
    },
    horizontal: {
        left: {
            ...
        },
        right: {
            ...
        },
        center: {
            ...
        }
    },
};

Let me know what you think.

[etimberg]

@Jareechang in your proposal, what would happen if the user set start_horizontal but the legend was on the left or the right side?

[Jareechang]

well, in the case, we would most likely need to enforce / validate that in our "pattern matcher" when getting the enum values.

Steps:

1. Take in user inputs
2. Pattern matcher — match inputs to correct enum values
3. Get X and Y values from given enum values

rough Example:
Matcher

match -> 
   isHorizontal ? 
        isValid ? 
             returnValueBasedOnAlignment
   isVertical ? 
         isValid ?
              returnValueBasedOnAlignment

input: { titlePosition: 'top / bottom', alignment: 'Left' } 
    -> START_HORIZONTAL

input: { titlePosition: 'left / right', alignment: 'Left' } 
    -> CENTER (default to center because invalid user input)

[simonbrunel]

@Jareechang if we need a method that returns x and y for position and align, it's fine to have these two arguments, no need for extra options values. This is a simple case and I don't think we need any JavaScript "kind-of" enum, let's compare strings since it should not be used at so many places.

These options should satisfy @SmashedBird and @etimberg requests (consistent with this proposal):

• title.position: position of the box around the chart (top, left, right, bottom)
• title.align: title alignment inside the layout box (start, center, end, stretch)
• title.textAlign: horizontal alignment of text (left, center and right)

title.position is already implemented and textAlign seems directly mapped to context.textAlign.

[SmashedBird]

Awesome. Thank you for the good work @simonbrunel

[Jareechang]

quick question @simonbrunel or @etimberg. I am trying to implement this solution but I am blocked by some implementation.

Both of these use the me.margins property.

Align Left:

Align Right (works fine):

is me.margins.left mis-calculated ? or maybe I need to account for Yscale offset ?