JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
  <div id="container">
  </div>
</body>
</html>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    legend: {
    			//	x: -30,
            enabled:true,
        //    floating: true,
       //     layout: "vertical",
         //   verticalAlign: "top",
       //     align: "right",
               symbolHeight: .001,
           symbolWidth: .001,
           symbolRadius: .001
      			
        },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
       // crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    series: [{
    		name: "x-axis month y-axis count",
        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]
    }]
});
$(document).ready(function(){
	
})