How to set round corners for dataLabel in Highcharts

Question

In the render method I adjust values of certain dataLabels using attr method. How can I adjust the corner radius of these dataLabels?

Here's my render:

render: function () {
  amountOfRenders += 1;

  const points = this.series[0].points;

  for (var i = 0; i < points.length; i++) {

    if (i < points.length - 1) {
      const dataLabel1 = (points[i] as any).dataLabel
      const dataLabel2 = (points[i + 1] as any).dataLabel

      if ((dataLabel1.x + dataLabel1.width) >= dataLabel2.x) {

        var newY = 0;
        var newX = 0;

        if (amountOfRenders <= 1) {
          newY = dataLabel1.y - (dataLabel1.height + 2)
          newX = dataLabel1.x - (dataLabel1.width - 19)
        }
        else {
          newY = dataLabel1.y
          newX = dataLabel1.x
        }

        if ((points[i] as any).agregate === points[i + 1].agregate) {
          dataLabel1.attr({
            y: newY,
            fill: points[i].color
          });
        }

        if ((dataLabel1.x + dataLabel1.width) > this.chartWidth - (this.chartWidth / 10)) {
          dataLabel1.attr({
            x: newX,
          });
        }
      }
    }
  }

  if (allowChartRedraw) {
    allowChartRedraw = false;

    this.redraw();
  }
},

I was trying to add the rx value as for svg objects:

dataLabel1.attr({
    y: newY,
    fill: points[i].color
});

But it doesn't work. Is there any way to add round corners for dataLabel? Also I would like to know if it's possible to add borders.

Answer 1

You need to change the r attribute:

dataLabel1.attr({
    ...,
    r: 10
});

---

Live demo: https://jsfiddle.net/BlackLabel/L7ar29k4/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr