3

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

supertrue
  • 2,049
  • 5
  • 30
  • 49
  • line-height is not supported in css in svg. This is a property of html css, so you can try to enable [useHTML](http://api.highcharts.com/highcharts/xAxis.labels.useHTML) option and apply all the css options avaiable for HTML. – morganfree Mar 08 '17 at 13:26

2 Answers2

2

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.

Community
  • 1
  • 1
morganfree
  • 12,254
  • 1
  • 14
  • 21
0

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

Liviu Boboia
  • 1,734
  • 1
  • 10
  • 21
  • Noted. However, I'm looking for a way to do this with the CSS "[styled mode](http://www.highcharts.com/docs/chart-design-and-style/style-by-css)" branch of Highcharts, which is probably why we are getting different results. Interestingly, in the JS-styled branch you are using, it appears to convert any `style.lineHeight` value, regardless of units, into a number of pixels, as opposed to permitting the values permitted by the [CSS line-height spec](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height). – supertrue Mar 08 '17 at 16:24