Chart.js: [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 ?

[stranger08]

hello. I still can't find this feature in latest documentation.
Is it available or not?

[Hintalo]

Yes this would be a very nice feature.
But until it is made available: is there any way of showing either the y-axis title or the Chart-Title at the top left position, simpy written horizontally (i.e. left-to-right) ?
Currently I have the problem that the y-axis title is always shown as rotated-text (i.e. bottom-to-top) and the Chart-Title is shown at the center.
Thanks.

[sizilium]

Although this feature is called "Title alignment options" please implement the same for the Legend.
I need the Legend to be right-aligned on top.
Thanks.

[mrdansk]

Can a more flexible text positioning be added, I have a requirement for a certain format to be replicated and it would be useful to able to attach several text elements at several positions with multiline and size/font/colour formatting. Similar to my crudely drawn example.

[Hedva]

Any updates on this?
@Jareechang did you made any progress with https://github.com/chartjs/Chart.js/issues/3706?_pjax=%23js-repo-pjax-container#issuecomment-285900148 ?
This is a really nice feature to have within Chartjs

[Koshux]

I am also interested in text-alignment of both the legend items as well as the chart title. Does anyone know whether progress has been made on any of these two possible configurations?

[heytimc]

+1

[Hantzley]

+1

[BWagener]

+1

[kcabadingk8]

+1

[josezulu]

+1

[manhar-developer]

Hi @Jareechang
Please update on this . is this feature available

[radhasatam]

+1

[Lenophie]

Any update on this ?

[oivindth]

+1

[lalit-lintel]

+1

[sudheej]

+1

[Jareechang]

Hey Everyone, unfortunately, sorry I do not have much time. Also, I do not use the library much anymore so have not been able to keep up with the developments.

[Mattinn]

I'm also interested in this feature +1

[AlbertoCrespoGuzman]

me too

[consciousnessdev]

Hope finish soon :)

[tomvrampio]

+1

Going to have to hide the legend and make an HTML replacement because of this

[tobikummer]

+1

[benmccann]

I believe this was implemented for v3: https://github.com/chartjs/Chart.js/pull/6908