Skip to content

Array tick labels not centered along the bar correctly on horizontal bar charts #5211

@Moghul

Description

@Moghul

Expected Behavior

Tick labels can be passed as an array of strings to be represented as multiple lines on a chart. It is expected that the label is then centered vertically to the bar's position.

Current Behavior

The first string in the array is centered to the bar, and subsequent strings are stacked below the first one.

Possible Solution

Count the number of labels and change the initial offset for the labels to be higher by half the array length multiplied by the line height.

Steps to Reproduce (for bugs)

https://jsfiddle.net/qL4rm9an/3/

I'm not sure if I'm missing a setting or something (though I don't see why centering wouldn't be default behaviour)...

Context

I know I can draw my own labels with a homemade plugin but that is not really an option for me. I have situations where potentially dozens of charts are loaded so a solution like that would be potentially very heavy

Environment

  • Chart.js version: 2.7.1, 2.6.0, 2.5.0, maybe others?
  • Browser name and version: Any
  • Link to your project:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions