Highcharts test tool

by Rajesh Danabal

HTML

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

<div id="container" style="width: 600px; height: 500px"></div>

JavaScript

var ren = new Highcharts.Renderer(
    document.getElementById('container'),
    600, 
    500
);

y = 0;
$.each([6, 9, 12, 16, 20, 30, 40, 60], function(i, fontSize) {
    
    y += fontSize + 20;
    ren.path(['M', 10, y + 0.5, 'L', 600, y + 0.5])
        .attr({
            'stroke-width': 1,
            'stroke': 'silver'
        })
        .add()
    
    var label = ren.label('Base', 10, y, null, null, null, null, true)
        .attr({
            'padding': 0,
            'stroke-width': 1,
            'stroke': 'blue'
        })
        .css({
            fontSize: fontSize + 'px'
        })
        .add();
    
    console.log(
        'fontSize:', 
        fontSize,
        'assumed lineHeight:', 
        ren.fontMetrics(fontSize + 'px').h, 
        'actual height:', 
        label.getBBox().width
    );
    
    ren.label('Top', 210, y)
        .attr({
            'padding': 0,
            'stroke-width': 1,
            'stroke': 'blue'
        })
        .css({
            fontSize: fontSize + 'px'
        })
        .add();
    
    ren.text('Text', 410, y)
        .css({
            fontSize: fontSize + 'px'
        })
        .add();
});