Chart.js: Customize legend box height

Created on 24 Feb 2016  路  32Comments  路  Source: chartjs/Chart.js

as the code below, the legend box height is binded to the label fontSize, can i customize the legend box height independent of the label fontSize, like the boxWidth ?

`
// Draw the box

ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
`

help wanted enhancement

Most helpful comment

Another user here that would really appreciate this feature!

All 32 comments

@timcui this is currently not possible. We can add it as an enhancement

thanks for support

Another user here that would really appreciate this feature!

Any news on this? I can set boxWidth but not boxHeight?

  legend: {
    display: true,
    position: "right",
    labels: {
      fontFamily: "Comic Sans MS",
      boxWidth: 20,
      boxHeight: 2
    }
  }

That's correct @dt1973 only boxWidth is supported

Hi @Ryan-Haines! That is unfortunate as most professional legend boxes these days seem to have really short heights. Looks a lot better imho!

Agree, this is actually a request from our design team as well. customizing this would be very helpful.

Implemented in #4890 (still need unit tests)

+1 for this feature (#4890 was unfortunately closed before merging)

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

@simonbrunel hello! Any idea when we're likely to see this feature? Many thanks!

4811 looks to be almost finished through right?

@touletan are you alive? Your PR from 2018 didn't go through. Wondering if there are any alternatives?

This feature is really needed.

+1

+1

+1!

+1

Would be great indeed

Would be great to have.

+1

Is this not available in the live editor? I tried adding version: 3.0 to my chart but boxHeight still isn't working.

Was this page helpful?
0 / 5 - 0 ratings