CODEWITHSUNDEEP
highcharts
Sabira
Sabira

Reputation: 103

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

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.

Upvotes: 0

Views: 186

Answers (1)

magdalena
magdalena

Reputation: 3695

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/

Upvotes: 1

Related Questions