Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple multi-line data labels and vertical spacing/line-height

See original GitHub issue

Creating a horizontalBar chart with many multiple-line labels on the left causes (visually) incorrect vertical spacing between them, if the chart is not tall enough. I’ve tried to properties inside beforeFit/afterFit callbacks but no success so far.

Current Behavior

https://jsfiddle.net/ncfs4164/6/

Expected Behavior

User should be able to manually set the spacing (or label’s lineHeight?) between lines inside a multi-line label.

Chart.js version: 2.5.0 (tho older versions yield the same result)

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:7 (2 by maintainers)

Top GitHub Comments

2reactions

akegancommented, Mar 20, 2018

Line-height issue related to https://github.com/chartjs/Chart.js/issues/4379 as well. Are there any plans to allow for configuration of line height? Has anyone found a solution?

Ideally we’d be able to vertically-align labels, but adjusting line height might also help with my issue:

0reactions

PCASMEcommented, Nov 2, 2018

Any workaround for this?

Top Results From Across the Web

How to stack multi-line labels vertically in BoxLayout

If the Label s you added to MyWidget have fixed amount of text you can just set a specific value for MyWidget 's...

How To: Split labels from multiple fields to multiple lines in ...

In the Label Manager window, select the label class to be split to multiple lines and click Expressions....

Change the format of data labels in a chart

Tip: Make sure that only one data label is selected, and then to quickly apply custom data label formatting to the other data...

vertical align react native

To do vertical centering when using ScrollView with React Native, we can set the ... How to Align a Checkbox and Its Label...

10.10 Using Labels with Multiple Lines of Text

Multiline legend labels (left); With increased key height and reduced line spacing (. Figure 10.17: Multiline legend labels (left); With increased key ...