JSFiddle - React, Tailwind, and code Playground

by Pawan Jadhav

HTML

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

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

JavaScript

$(function () {
    $('#container').highcharts({
    chart: {
        "renderTo": null,
        "events": {},
        "inverted": false,
        "backgroundColor": "rgba(255,255,255,0)",
        "reflow": false,

        "plotBackgroundColor": "rgba(255,255,255,0)",
        "zoomType": "xy",
        "resetZoomButton": {
            "theme": {
                "fill": "white",
                "stroke": "#003ce1",
                "r": 0,
                "style": {
                    "color": "#003ce1",
                    "cursor": "pointer",
                    "fontSize": "14px",
                    "fontFamily": "Lucida Sans Unicode"
                },
                "states": {
                    "hover": {
                        "fill": "#003ce1",
                        "style": {
                            "color": "white"
                        }
                    }
                }
            }
        },
        "options3d": {
            "enabled": false
        }
    },
    title: {
        "text": null
    },
    tooltip: {
        "enabled": true,
        "shared": false,
        "borderWidth": 1,
        "borderRadius": 1,
        "backgroundColor": "#ffffff",
        "style": {
            "color": "#000000",
            "fontSize": "0.857rem",
            "fontFamily": "Lucida Sans Unicode",
            "fontWeight": "normal",
            "fontStyle": "normal",
            "textDecoration": "none"
        },
        "crosshairs": [
            false,
            false
        ]
    },
    plotOptions: {
        "series": {
            "animation": {
                "duration": 700
            },
            "cursor": "pointer",
            "showInLegend": true,
            "events": {}
        }
    },
    legend: {
        "enabled": true,
        "item": {},
        "borderWidth": 0,
        "layout": "horizontal",
        "backgroundColor": "rgba(255,255,255,0)",
        "itemStyle": {
            "color": "#000000",
           ...