0

Hello Highcharts team!

Qq - I am trying to set line height for multiline annotation in styled mode i.e. set a dy. I know that in non-styled mode it's achieved by setting annotations[0].labels[0].style.lineHeight property docs, but having trouble with how to do that in styled mode. useHTML wont work for me because we utilize exporting module and seems like line breaks are not preserved in downloaded images/svg when useHTML is enabled. Link to fiddle - https://jsfiddle.net/4vrgysxk/1/

Thanks in advance

Sabira
  • 103
  • 6

1 Answers1

0

I think that the best approach is:

  • set useHTML as true for the annotation label,
  • render annotation as HTML element and style it,
  • set the exporting.allowHTML as true,

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

API: https://api.highcharts.com/highcharts/exporting.allowHTML

API: https://api.highcharts.com/highcharts/annotations.labelOptions.useHTML

Sebastian Wędzel
  • 11,417
  • 1
  • 6
  • 16
  • Thanks Sebastian! Our charts a bit more complicated and unfortunately the solution you proposed doesn't work for us. I was hoping to modify Highcharts internal method like in [this](https://stackoverflow.com/questions/42663155/how-to-adjust-line-height-ellipses-in-highcharts-axis-labels/42678647#42678647) answer with styling Ticks. Is there a similar method for annotation labels? – Sabira Feb 24 '22 at 16:20
  • @Sabira what is wrong with this solution? – Sebastian Wędzel Feb 25 '22 at 14:52
  • when SVG is placed into illustrator the annotation label text is invisible – Sabira Feb 25 '22 at 15:02
  • What kind of illustrator do you test? Have you tested any other text colors for the annotation? – Sebastian Wędzel Feb 25 '22 at 15:19
  • I am using Adobe Illustrator v24.2.1, yes I've tested with other colors. – Sabira Feb 25 '22 at 15:45
  • I have a custom logic in place, but wanted to know if there is an internal method I can use, similar to ``` var H = Highcharts; H.wrap(H.Tick.prototype, 'addLabel', function (p) { p.call(this); const label = this.label; const labelOptions = this.axis.options.labels; if (label) { label.css({ lineHeight: labelOptions.style.lineHeight }) } }). ``` If there isn't I'll stick to that custom code I have. – Sabira Feb 25 '22 at 15:48