Highcharts Demo

author(s): Torstein Hønsi

by prathik

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

	<input id="em" type="range" min="0.3" max="2" step="0.01" value="1" />
</div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

#main {
	width: 600px;
	margin: 0 auto;
}
#container {
	height: 400px;
}
input#em {
	width: 100%;
}

.highcharts-container {
	font-size: 1em;
}


/* Apply relative sizes to visible elements */
.highcharts-yaxis-grid .highcharts-grid-line {
    stroke-width: 0.0625em;
}

.highcharts-xaxis .highcharts-tick {
    stroke-width: 0.0625em;
}

.highcharts-graph {
	stroke-width: 0.125em;
}
.highcharts-point {
	stroke-width: 0.125em;
}

JavaScript

var chart = Highcharts.chart('container', {

    chart: {
        animation: false,
        styledMode: true
    },

    title: {
        text: 'Relative fonts and lines'
    },

    subtitle: {
        text: 'Use the slider below the chart to set top-level font size'
    },

    xAxis: {
        categories: ['Rain', 'Snow', 'Sun', 'Wind']
    },

    series: [{
        data: [324, 124, 547, 221],
        type: 'column'
    }, {
        data: [698, 675, 453, 543]
    }]

});


$('#em').on('input', function () {
		console.log("here");
    chart.container.style.fontSize = this.value + 'em';

    // Update layout based on new font and line sizes
    chart.isDirtyLegend = true;
    chart.redraw(false);
});