Highcharts xAxis labels lineHeight bug

by Torstein Hønsi

HTML

<script src="https://code.highcharts.local/highcharts.js"></script>

<div>
    <div class='text-container-rem'>
        1.2rem ???
    </div>
    <div class='text-container-px'>
        ??? 12px
    </div>
</div>
<div class='chart-container' id="container" style="height: 400px; width: 400px"></div>
<div class='chart-container' id="container2" style="height: 400px; width: 400px"></div>

CSS

html {
    font-size: 62.5% !important;
}

.chart-container {
    display: inline-block;
}

.text-container-rem {
    font-size: 1.2rem;
    display: inline-block;
}

.text-container-px {
    font-size: 12px;
    display: inline-block;
}

JavaScript

(function (H) {
	var pInt = H.pInt,
    	SVGElement = H.SVGElement;
	H.SVGRenderer.prototype.fontMetrics = function (fontSize, elem) {
        var lineHeight,
            baseline;

        if (this.styledMode || !/px/.test(fontSize)) {
            fontSize = elem && SVGElement.prototype.getStyle.call(
                elem,
                'font-size'
            );
        } else {
            fontSize = fontSize ||
                // When the elem is a DOM element (#5932)
                (elem && elem.style && elem.style.fontSize) ||
                // Fall back on the renderer style default
                (this.style && this.style.fontSize);
        }

        // Handle different units
        if (/px/.test(fontSize)) {
            fontSize = pInt(fontSize);
        } else {
            fontSize = 12;
        }

        // Empirical values found by comparing font size and bounding box
        // height. Applies to the default font family.
        // https://jsfiddle.net/highcharts/7xvn7/
        lineHeight = fontSize < 24 ? fontSize + 3 : Math.round(fontSize * 1.2);
        baseline = Math.round(lineHeight * 0.8);

        return {
            h: lineHeight,
            b: baseline,
            f: fontSize
        };
    }
}(Highcharts));

Highcharts.chart('container', {
    xAxis: {
        categories: ['3vw', '3vw', '3vw'],
        labels: {
            autoRotation: false,
            style: {
                fontSize: '3vw'
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    }]
});

Highcharts.chart('container2', {
    xAxis: {
        categories: ['fdgsd sdf sdf sdf sdf', 'fdgsd sdf sdf sdf sdf 1', 'fdgsd sdf sdf sdf sdf 2'],
        labels: {
            autoRotation: false,
            style: {
                fontSize: '1.4rem'
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    }]
});