Highcharts: How to add another(custom) label/ legend/ something else to the top right of the graph?

Question

In my highcharts, I already have a legend at the bottom left of the graph but want to add a custom status indicator for the entire graph. It's going to be a colored oval with a colored dot and a status on it like in the picture.

Should I be trying to use a custom legend or something else? I don't need to hide/show abiliity of the legend so maybe I'm thinking a label is more appropriate but it seems like those only go in the graph. I want something on the top right of the graph. I'm looking through the API to see what else is available but haven't found one that suites my needs.

edit- seems like I might have to do "chart.renderer.text" but I'm not sure how to convert and make it work in typescript http://jsfiddle.net/phpdeveloperrahul/HW7Rm/

function (chart) {

var point = chart.series[0].data[8],
    text = chart.renderer.text(
        'Max',
        point.plotX + chart.plotLeft + 10,
        point.plotY + chart.plotTop - 10
    ).attr({
        zIndex: 5
    }).add(),
    box = text.getBBox();

chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
    .attr({
        fill: '#FFFFEF',
        stroke: 'gray',
        'stroke-width': 1,
        zIndex: 4
    })
    .add();

});

score 3 · Accepted Answer · answered Feb 11 '22 at 15:12

The best way to add a custom element inside the legend is to use the legend.labelFormatter.

events: {
  render() {
    let chart = this,
      legendAttr = chart.legend.box.getBBox(),
      padding = 5;

    chart.plus = chart.renderer.text('| +', chart.legend.box.parentGroup.alignAttr.translateX + legendAttr.width + padding, chart.spacingBox.height + padding / 2).attr({
      cursor: 'pointer',
    }).css({
      fontSize: 20
    }).on(
      "click",
      function() {
        alert('plus was clicked')
      }
    ).add()
  }
}

API References: https://api.highcharts.com/highcharts/legend.labelFormatter,

Demo: https://jsfiddle.net/BlackLabel/yu7qm9jx/1/

Highcharts: How to add another(custom) label/ legend/ something else to the top right of the graph?

1 Answers1