How to adjust line-height/ellipses in Highcharts axis labels

Question

Is there a way to adjust the line-height of axis labels in Highcharts? Sometimes with line-broken labels, overlap/spacing issues can occur that would be mitigated if it were possible to decrease line-height.

As you can see in the longer red labels in the image below, it would be helpful to customize line-height. Is there a way to do this? Setting line-height in either the CSS or in xAxis.labels.style did not have any effect.

Example options:

xAxis: {
    labels: {
      style: { 
        textOverflow: 'none', // To disable automatic ellipsizing, per https://github.com/highcharts/highcharts/issues/3941
        // lineHeight: '0.5' // Has no effect
      }
    },
    categories: [
      'Sweden', 
      'Federal Democratic Republic of Ethiopia', 
      'Finland',
      'United Kingdom of Great Britain and Northern Ireland', 
      'Oceania'],
 ...

Codepen: http://codepen.io/ericpedia/pen/peNZML

---

Answer 1

You cannot do this via css because there is no line-height presentational attribute support in svg. See the answer svg-how-to-set-text-line-height. What Highcharts do - it mocks html-css line-height property on svg by setting dy property. In SVG dy is not a presentational attribute so it cannot be set in stylesheet.

To preserve the lineheight option, you can modify Highcharts internal method so its cssish style will be applied.

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
    })
  }
})

Axis config:

 labels: {
      style: { 
        textOverflow: 'none',
        lineHeight: 12
      }
    },

Live example and output:

https://jsfiddle.net/4dztcw5d/

As I mentioned in the comment, you can also set labels.useHTML to true, build a proper html and apply to it html-css styling, including line-height.