JSFiddle - React, Tailwind, and code Playground

by sanjshah

HTML

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

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

JavaScript

$(function() {
  $('#container').highcharts({
    title: {
      text: 'Permit Types Per Month',
      x: -20 //center
    },
    credits:false,
    subtitle: {
      text: 'Year: 2015',
      x: -20
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ]
    },
    yAxis: {
      title: {
        text: 'Permit Approved'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      valueSuffix: '°C'
    },
    legend: {
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 40,
            floating: true
    },
    series: [{
      name: 'Hot Works',
	  color: '#FF7C5B',
      data: [270, 269, 295, 245, 282, 215, 252, 265, 233, 183, 139, 296]
    }, {
      name: 'Access Eq.',
	  	  color: '#B3D8EC',
      data: [220, 280, 257, 113, 170, 220, 248, 241, 201, 241, 286, 225]
    }, {
      name: 'Access Eq. & Cradles',
	  	  color: '#F9BFE0',
      data: [290, 260, 325, 284, 135, 170, 186, 179, 143, 290, 239, 210]
    }, {
      name: 'Pressurised Systems',
	  	  color: '#DD9CF5',
      data: [239, 242, 257, 285, 219, 252, 270, 266, 242, 203, 266, 248]
    }]
  });
});