Support background colour for radial scale point labels

[spideyinf]

Happy holiday,

I just want to ask for an option to add the background color (a rounded rect with bg color) for labels (individually) in Chartjs. Is there any callback that I can apply for changing this, any help is appreciated with best regards!

This is the demo

[etimberg]

To someone who wants to implement this, would need to draw a background rectangle just before https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.radialLinear.js#L278

[spideyinf]

@etimberg Thank you so much for your feedback.
I am trying to look at this tut http://devlabo.blogspot.jp/2010/03/javascriptcanvas.html as well but not figuring out the way to implement this.
Does it mean that I must modify Chart.bundle.js? I am so confused right now, excuse me.

[etimberg]

I think drawing the rectangle should be as simple as fillRect(left, top, width, height) before the line I mentioned above. You could modify Chart.bundle.js or you could modify the source file and then rebuild the output.

[spideyinf]

@etimberg I have tried but and this is what I got

// Add a func to draw round rect
  function fillRoundRect(ctx, l, t, w, h, r) {
    var pi = Math.PI;
    ctx.beginPath();
    ctx.arc(l + r, t + r, r, - pi, - 0.5 * pi, false);
    ctx.arc(l + w - r, t + r, r, - 0.5 * pi, 0, false);
    ctx.arc(l + w - r, t + h - r, r, 0, 0.5 * pi, false);
    ctx.arc(l + r, t + h - r, r, 0.5 * pi, pi, false);
    ctx.closePath();
    ctx.fill();
  }

// Add to L277
fillRoundRect(ctx, pointLabelPosition.x - 5, pointLabelPosition.y - 5, 65, 30, 15);

• Problems:

1. Having trouble with the position of each rect, do you guys have any suggestion?
2. I want to change the color of each rect.
3. Which is the best way to handle this in a project, I need help to modify the source code and update it in node_modules

I really appreciate if someone goes to test these codes and give me some advice (bow)

• Screenshot:
  

[etimberg]

pointLabelPosition is the center of the text, so you would need to adjust the position

var size = scale._pointLabelSizes[i];
fillRoundRect(ctx, pointLabelPosition.x -(size.w / 2), pointLabelPosition.y - (size.h / 2), size.w, size.h, 15)

To change the colour you can do:

ctx.save()
ctx.fillStyle = 'rgba(r, g, b, a)'; // new fill colour here
ctx.restore()

[spideyinf]

Thank you so much for your support @etimberg

[ninjaklas]

Hi,

Thank you so much for this! I can't, however, get the backgrounds colored, and also not get the backgrounds in the shape that @spideyinf had, nor in the centred position as described by @etimberg. I attach image and code, inserted between these two lines (in v2.7.2, bundle):

adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition);

and

fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size);

Here's the code:

function fillRoundRect(ctx, l, t, w, h, r) {
	var pi = Math.PI;
	ctx.beginPath();
	ctx.arc(l + r, t + r, r, - pi, - 0.5 * pi, false);
	ctx.arc(l + w - r, t + r, r, - 0.5 * pi, 0, false);
	ctx.arc(l + w - r, t + h - r, r, 0, 0.5 * pi, false);
	ctx.arc(l + r, t + h - r, r, 0.5 * pi, pi, false);
	ctx.closePath();
	ctx.fill();
}
// Add to L277
ctx.save();
ctx.fillStyle = 'rgba(34, 23, 31, 42)'; // new fill colour here
ctx.restore();
var size = scale._pointLabelSizes[i];
fillRoundRect(ctx, pointLabelPosition.x -(size.w / 2), pointLabelPosition.y - (size.h / 2), size.w, size.h, 15);

And here's the result:

Really grateful for any help.

Vidar

[etimberg]

@ninjaklas the issue I think is that in the current code, the pointLabelPosition is not guaranteed to be the left edge of the text.

These two lines get the canvasTextAlign and adjust the height. You should adjust the height and then use the following code based on the alignment

Alignment	Outcome
center	Current code works
left	Need fillRoundRect(ctx, pointLabelPosition.x -size.w, pointLabelPosition.y - (size.h / 2), size.w, size.h, 15);
right	Need fillRoundRect(ctx, pointLabelPosition.x, pointLabelPosition.y - (size.h / 2), size.w, size.h, 15);

[ninjaklas]

Thank you so much @etimberg, exactly what I needed! With some additional tweaks I now got the positioning exactly where I wanted it.

[kyrakwak]

Hi @etimberg, would you happen to have an updated idea/example of how to style the radial scale point labels as rounded rects considering your changes for version 3.x in #8588? I am looking to achieve the same end result as the original poster.

[etimberg]

@kyracriteria I don't have updated code, but it should be a lot easier now. You can call chart.scales.r.getPointLabelPosition(index) which will return an object containing left, top, right, bottom representing the edges of the rectangle that is the point label. It should be much easier to draw the background now.