chartjs-plugin-datalabels icon indicating copy to clipboard operation
chartjs-plugin-datalabels copied to clipboard

Can we set a fixed width/height?

Open hailwood opened this issue 5 years ago • 5 comments

My client wishes to have a circle drawn behind the labels.

I know the labels are between 1-3 numbers, so I'd like to be able to say draw all the datalabels in a 40x40px circle.

I know how to set the backgrounds etc, just not how to make them a fixed width.

image

hailwood avatar Jan 17 '20 03:01 hailwood

Hi @hailwood! No, it's currently not possible.

simonbrunel avatar May 23 '20 17:05 simonbrunel

Is it possible now?

maurk851 avatar Feb 19 '21 14:02 maurk851

For anyone wondering, i actually managed to get pretty close to perfect circles thanks to scriptable padding NOTE: those values are for font size 14. For other values you'll probably want to tweak multiplier etc cause space/letter changes, and provided code doesn't account for negatives.

borderRadius: 100,
textAlign: "center",
verticalAlign: "middle",
// POC of making any value a circle
// without scriptable width/height
padding: function(context) {
    const dataset = context.dataset;
    const value = dataset.data[context.dataIndex];
    // doesn't really work for singe digits, using known-good preset
    if (value < 10) return {top: 6, bottom: 5, left: 10, right: 10};
    const padding = (Math.log(value) * Math.LOG10E + 1 | 0) * 4
    return {
        top: padding,
        bottom: padding - 2, // slightly less on the bottom, otherwise seems off-center
        left: 8,
        right: 8,
    }
},

image

Doesn't fit piechart all that well on scale cause space is limited, but for other cases should be just fine

SanctusAnimus avatar Feb 14 '23 23:02 SanctusAnimus