Highcharts Dynamic Font Size

by Torstein Hønsi

HTML

<script src="http://github.highcharts.com/highcharts.js"></script>

<div id="container"></div>

<label for="font-size">Change container font-size</label>
<input type="range" min="6" max="40" value="20" name="font-size" id="font-size"/>
<span id="font-size-value">20px</span>

CSS

body {
    margin: 10px;
    font-family: Arial, Verdana, sans-serif;
}
#container {
    min-width: 700px;
    max-width: 1000px;
    height: 400px;
    margin: 20px auto;
    font-size: 20px;
}

JavaScript

Highcharts.setOptions({
    chart: {
        style: {
            fontSize: '1em'
        },
        borderWidth: 1,
        plotBorderWidth: 1,
        type: 'column'
    },
    credits: {
        style: {
            fontSize: '0.7em'
        }
    },
    title: {
        text: 'Dynamic font size',
        style: {
            fontSize: '1.5em'
        }
    },
    legend: {
        itemStyle: {
            fontSize: '1em'
        },
        borderWidth: 1,
        align: 'right',
        verticalAlign: 'middle'
    },
    tooltip: {
        headerFormat: '<span style="font-size: 0.8em">{point.key}</span><br/>',
        style: {
            fontSize: '1em'
        }
    },
    xAxis: {
        labels: {
            style: {
                fontSize: '0.8em'
            }
        }
    },
    yAxis: {
        labels: {
            style: {
                fontSize: '0.8em'
            }
        },
        tickWidth: 1
    }
});

var options = {
    
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    subtitle: {
        text: 'Drag the slider'
    },

    series: [{
        animation: false,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

};
$('#container').highcharts(options);


$('#font-size').bind('input', function () {
    $('#container').highcharts().container.parentNode.style.fontSize = this.value + 'px';
    $('#font-size-value').html(this.value + 'px');
    $('#container').highcharts(options);
});