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) {;

  const label = this.label;
  const labelOptions = this.axis.options.labels;

  if (label) {

Axis config:

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

Live example and output:


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.


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

 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

Related Query

More Query from same tag