Is it possible to make custom shaped label w/o use

Question

I have animated moving label

plotbandLabel.animate({
    y : yAxis.toPixels(y) - labelOffset
}, {
    duration : 500,
    step : function () {
        this.attr({
            text : yAxis.toValue(this.y + labelOffset).toFixed(2),
            zIndex : 999999999
        })
    },
    complete : function () {
        this.attr({
            text : y.toFixed(2),
            zIndex : 999999999
        })
    }
});

Here is the full example: http://jsfiddle.net/7yo3nht4/ And I need this label to be shaped like an arrow:

Answer 1

If you omit fill property in renderer.label the label's box won't be created:

        plotbandLabel = this.renderer.label(
            (...)
          )
          .css({
            (...)
          }).attr({
            (...)
            //fill: 'red' // no fill
          })
          .add();

Then you can create a custom path and append it to the plotbandLabel SVG group:

        this.renderer.path(['m', -10, 15, 'l', 15, -15, 'l', 50, 0, 'l', 0, 30, 'l', -50, 0, 'l', -15, -15, 'z']).attr({
          fill: 'rgba(0, 0, 0, 0.75)'
        }).add(plotbandLabel);

Live demo: http://jsfiddle.net/kkulig/hqyfpsw4/

---

API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

Answer 2

The label renderer has this form:

label: function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)

So if useHTML=true the string could be an HTML string like this:

var txt = '<div class="arrow_box">'+(66).toFixed(2)+'</div>';

and applying a proper CSS:

.arrow_box {
  color: #FFFFFF;
  position: relative;
  background: rgba(0, 0, 0, 0.75);
  border: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50px;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(255, 0, 0, 0)
    border-right-color: rgba(0, 0, 0, 0.75);
    border-width: 20px;
    margin-top: -20px;
}
.arrow_box:before {
    border-color: rgba(0, 255, 0, 0);
    border-right-color: rgba(0, 0, 0, 0.75);
    border-width: 20px;
    margin-top: -20px;
}

You can obtain an arrow box as a label.

Check the fiddle updated: http://jsfiddle.net/beaver71/eenjkv5c/