chartjs / chartjs/chartjs-plugin-datalabels

Padding and lineHeight has no effect

Open
#153 8 comments 1 reaction 0 assignees View on GitHub
needs test case support
Dominant language
JavaScript
Stars
920
Forks
507
PR merge metrics
No merged PRs in 30d

Description

Hi!
![Screenshot_2019-10-10](https://user-images.githubusercontent.com/859154/66565451-d0910c80-eb62-11e9-8637-5a0cb6e38fb6.png)

I am trying to vertically center the datalabels in my horizontal bar chart, so they are perfectly vertically aligned in the middle of the bar. As you can see they are a little bit more to the top of the bar.
To achieve this I tried to give some padding or a font.lineHeight, but both options have zero effect at all, as they were ignored.
I could use the offset with bottom alignment, but this is already used for the left/right positioning of the labels. So not many options are left. Why is the padding not working?

This is my configuration:
```Javascript
datalabels: {
font: {
size: 10,
weight: "bold",
},
clip: true,
anchor: "start",
align: "start",
offset: ({ dataset, dataIndex }) => {
const value = dataset.data[dataIndex];
return value <= 10 ?
0 :
value % 1 ? -39 : -31;
},
formatter: value => localeUtils.toLocaleString(value, "de-DE", 1) + "%",
}
```

Tried it like that:
```Javascript
datalabels: {
font: {
size: 10,
weight: "bold",
lineHeight: 2,
},
...
}
```

Or

```Javascript
datalabels: {
padding: { top: 20 }
...
}
```

Nothing happens.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.