Chart.js: Pie Graph legend on left or right is not vertically centered.

Some additional thoughts:

Edit: updated proposal, pack renamed to align, align renamed to labels.align, labels.boxAlign replaced by labels.stretch

I took a look at this and noticed that the proposed solution would exhibit the following issues

1. ctx.canvas.clientHeight is not guaranteed to be the render height of the canvas. When window.devicePixelRatio > 1 the canvas will have more pixels that it’s CSS height
2. itemHeight * me.legendItems.length will only give the legend height when there is one column of items. If there are enough data points, there will be multiple columns, and it will be incorrect

Proposed Solution

I think the better solution to this problem would be to update fit to store the height of each column. We already know it here. What we could do is save it into a new me._columnHeights array.

Then, we provide a new config option

legendOptions = {
  // options are 'start', 'end', 'center'. Default is 'start' which matches old behaviour
  align: 'start' 
}

During drawing, if the option is 'start' the legend draws at the top. If it’s 'end' its at the bottom. 'center' does as expected. This option would apply to both horizontal and vertical legends and would need to be implemented accordingly for the horizontal case.

CC @chartjs/maintainers for input

Any update on this guys? 😃

If not resolved yet, here is what he did:

var textWidth = ctx.measureText(legendItem.text).width, width = boxWidth + (fontSize / 2) + textWidth, x = cursor.x, y = cursor.y; y += (ctx.canvas.clientHeight - (itemHeight * me.legendItems.length)) / 2;

And the results:

Before:

After:

Thanks btw, I was looking for it.

I added the following because it seems to bug the legend when it is not on the side of the chart.

if(me.options.position == 'left' || me.options.position == 'right') y += (ctx.canvas.clientHeight - (itemHeight * me.legendItems.length)) / 2;

I’m looking for this exact behavior. Is the above hack still the only way to fix it?

+1

I found that @guschnwg hack works a bit incorrectly when we have paddings

So I changed this code:

y += (ctx.canvas.clientHeight - (itemHeight * me.legendItems.length)) / 2;

To the following:

y += (ctx.canvas.clientHeight - (itemHeight * me.legendItems.length) - labelOpts.padding) / 2;

Any news on this? Currently I’m turning off the built-in legend and using the legendCallback to build my own for this reason – which works well, but there are certain contexts where I want to use the built-in version

+1

If someone could explain chich part of the draw function to edit it would be nice

@adammatthewsmith this issue has not been fixed