Padding and lineHeight has no effect

[aldipower]

Hi!

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:

        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:

        datalabels: {
          font: {
            size: 10,
            weight: "bold",
            lineHeight: 2,
          },
...
       }

Or

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

Nothing happens.

[simonbrunel]

Hi @aldipower. padding should work, can you please create a codepen / jsfiddle that reproduces your issue with the latest version so we can debug what's going wrong.

[jamieburchell]

Did this ever get resolved? Same issue with the latest version. Line height and padding do nothing.

[teawithfruit]

While I've created a jsfiddle, the thought occured to me, that this problem can be a part of a custom webfont. Is this possible? To solve this, the line height or padding parameter should be a option.

And here I got the same problem. Both parameter have no effect to the labels. Do you have an idea?

https://jsfiddle.net/bool/xapqvnh3/20/

[jamieburchell]

FYI My project was using a custom font: Open Sans

[fehays]

I'm having the same problem. No custom font. However, I noticed if you just supply a number to padding, it does have an affect. It appears to add right padding padding: 20

[BaltasisKivis]

I'm also using a custom font and ran into the same issue. I've solved it by using the formatter and including an empty line before my value. With that, the lineHeight property seems to be working and I've managed to center my text vertically

datalabels: {
    color: '#fff',
        anchor :'end',
        align :'start',
        font: {
        size: "18",
            family: "Hind Guntur,sans-serif",
            weight: "600",
            lineHeight: 0.6
    },
    padding: {
        right: 20
    },
    formatter: function(value) {
        return '\n' + value;
    }
}

[mathias22osterhagen22]

Got some similar problem, the padding.bottom stopped to work suddently (I'm using Vue.js) fixed it with a :

 options: {
          plugins: {
            datalabels: {
              formatter: value => value+ "\n\n"
            },
          },
        },

[DaltonKirkCrafted]

I'm having the same issue on version 2.2.0 on a horizontal bar chat. I want to add vertical padding to my labels but it has no effect.

datalabels: {
    align:  'start',
    anchor: 'end',
    clamp: true,
    textAlign: 'left',
    labels: {
      valueLabel: {
        formatter: this.formatLabel,
        color: this.calcColor,
        padding: {
          bottom: 50
        }
      },
      valuePercentageLabel: {
        formatter: this.formatLabelPercentage,
        font: {
          weight: 700
        },
        color: this.calcColor
      }
    }
  }