score:2

Accepted answer

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.

score: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


Related Query

More Query from same tag