JSFiddle - React, Tailwind, and code Playground

by core972

HTML

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

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

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
  "chart": { "alignTicks": false, "zoomType": "xy" }, 
        "title": { "text": " ", "floating": false, "align": "center" },                                                     
        "xAxis": 
        [
        { 
            "categories": ['insolation','power','PR','Total'],   //PUT LABEL IN HERE 
            "crosshair": true, "index": 0, "isX": true 
        }
        ], 
        "tooltip": { "shared": true }, 
        "legend": 
        { 
            "layout": "horizontal", 
            "align": "right", 
            "x": 0, 
            "verticalAlign": "top", 
            "y": 0, 
            "floating": false, 
            "backgroundColor": "#FFFFFF" 
        }, 
        "yAxis": 
        [
        { 
            "gridLineColor": "transparent", 
            "labels": 
            { 
                "format": "{value}", 
                "style": { "color": "#7cb5ec" }, 
                "enabled": false 
            }, 
            "title": { "text": null, "style": { "color": "#7cb5ec" } }, 
            "opposite": false, 
            "index": 0,
            max:24
        },          
        { 
            "gridLineColor": "transparent", 
            "labels": 
            { 
                "format": "{value}", 
                "style": { "color": "#90ed7d" }, 
                "enabled": false 
            }, 
            "title": 
            { 
                "text": null, 
                "style": { "color": "#90ed7d" } 
            }, 
            "opposite": true, 
            "index": 1,
            max:24
        }, 
        { 
            "gridLineColor": "transparent", 
            "labels": 
            { 
                "format": "{value}", 
                "style": { "color": "#f7a35c" }, 
                "enabled": false 
            }, 
            "title": { "text": null, 
            "style": { "color": "#f7a35c" } }, 
            "opposite": true, 
            "index": 2,   
        }
        ], 
 ...