JSFiddle - React, Tailwind, and code Playground

by AbhishekRohan

HTML

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

<div id="container" style="min-width: 610px; height: 200px; margin: 0 auto"></div>

<input id="font-size" type="range" min="5" max="60" value="40"></input>

JavaScript

var options;
$(function () {
    options = {
        chart: {
            type: 'column'
        },
        legend: {
            itemStyle: {
                fontSize: '40px'
            },
            symbolHeight: 30,
            symbolWidth: 40
        },
        plotOptions: {
            series: {
                animation: false
            }
        },
        series: [{
            name: 'Aaa',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'Bbb',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }]
    };
    $('#container').highcharts(options);
    
    
    $('#font-size').bind('input', function (e) {
        options.legend.itemStyle.fontSize = this.value + 'px';
        options.legend.symbolHeight = this.value * 0.75;
        options.legend.symbolWidth = parseInt(this.value);
        $('#container').highcharts(options);
    });
});