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

2
votes

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

Example of issue that could be resolved by customizing line-height

2
javascripthighcharts
line-height is not supported in css in svg. This is a property of html css, so you can try to enable useHTML option and apply all the css options avaiable for HTML. - morganfree

2 Answers

1
votes

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/

lineheight

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.

0
votes

For some reason the highcharts library that you are using doesn't take into account some of the css. I tried using this one http://code.highcharts.com/highcharts.js and seems to work i added in the x-axis label style

 fontSize:'15px',
 lineHeight: "12"

and had to set the colors with !important 

text:nth-child(odd){ fill: blue!important; }
text:nth-child(even){ fill: red!important; }

and it seems to work, here is the codepen http://codepen.io/anon/pen/ryWoxo