Highcharts | Line height control for plot band labels in styled mode

Question

I am looking to find a way to control line height for plot band labels in styled mode. The useHTML property doesn't work in my case as I need styles to persist in the downloaded PNG. I was looking for a solution similar to this.

I've tried adding something similar, but it completely broke my chart.

function (p) {
  p.call(this);
  const plotLine = this;
  plotLine.label?.css(merge(this.options.label.style));

Here's a simple fiddle describing the issue, seems like no matter what is the font size the dy prop stays 15.

Appreciate if someone can help.

score 1 · Accepted Answer · answered May 26 '22 at 13:00

In this case, you need to wrap Highcharts.PlotLineOrBand.prototype render function. Check the following code and demo:

(function(H) {
   H.wrap(H.PlotLineOrBand.prototype, 'render', function(proceed) {
     proceed.apply(this, Array.prototype.slice.call(arguments, ));

     const label = this.label;

     if (label) {
       label.css({
         lineHeight: label.alignOptions.style.lineHeight
       })
     }

   });
 }(Highcharts));

More about Extending Highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Demo: https://jsfiddle.net/BlackLabel/nsg5abhq/

Highcharts | Line height control for plot band labels in styled mode

1 Answers1