Chart.js: [BUG]: pointLabels overlap tick labels for radar chart with large font size

[adrianhelvik]

This is both a bug and a feature request.

Expected Behavior

It should be possible to provent the ticks and pointLabels from colliding. A way to do this without breaking backwards compatibility would be to set padding at options.scale.pointLabels.padding.

Current Behavior

The pointLabels and tick labels collide.

Possible Solution

Add padding when calling measureLabelSize in scales/scale.radialLinear.js?

Steps to Reproduce (for bugs)

https://codepen.io/adrianhelvik/pen/BYYGzO?#

Context

I want to create a radar chart that conforms to the design I've been given and that is not possible. Tweaking another option would be a good alternative for my use case.

Environment

• Chart.js version: latest
• Browser name and version: Chrome 64
• Link to your project: https://codepen.io/adrianhelvik/pen/BYYGzO?#

[wmzhong]

Does anyone pick it up? If no, maybe I can handle it.

[etimberg]

@wmzhong what are you thinking of as a solution to this problem?

[wmzhong]

@etimberg On the below function:

function measureLabelSize(ctx, fontSize, label) {
    if (helpers.isArray(label)) {
        return {
            w: helpers.longestText(ctx, ctx.font, label),
            h: (label.length * fontSize) + ((label.length - 1) * 1.5 * fontSize)
        };
    }
    return {
        w: ctx.measureText(label).width,
        h: fontSize + 10
    };
}

Maybe we can return the 'h' with bigger value. But I'm not sure how big to add it.

[etimberg]

@wmzhong sounds good. I would make a configuration option for that value rather than a hardcoded number. The default would be 0 (existing behaviour) but it makes it easy to configure on a per chart basis

[wmzhong]

@etimberg It's better to make a configuration option. That's good.

[HCodemesh]

any solution to this?

[adrianhelvik]

Sweet! :D