JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/master/js/highcharts.src.js"></script>

<div id="container" style="height: 300px"></div>

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    yAxis: {
        type: 'logarithmic',
        plotBands: [{
            from: 1,
            to: 10,
            color: 'rgba(0,0,255, 0.2)',
            label: {
                text: 'Plot band: 1 to 10'
            }
        }],
        plotLines: [{
            value: 1000,
            width: 2,
            color: 'green',
            dashStyle: 'dot',
            label: {
                text: 'Plot line: 1000'
            }
        }]
    },

    series: [{
        data: [0.1, 2, 45, 1001, 200, 0.33, 10000]
    }]

});