score:2

Accepted answer

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/

score:-1

I decided to just get rid of the title and add custom css to the top of it.


Related Articles