JSFiddle - React, Tailwind, and code Playground

by id10922606

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: 400px; height: 400px; margin: 0 auto"></div>

CSS

.highcharts-title { border-bottom:solid 3px #c69a8d; margin-left: 2% !important; width:97% !important; left:0 !important;  }
.highcharts-subtitle {  background:#EDF3FF; display:block; /*padding:3px 5px;*/ margin-left: 2% !important; width:97%  !important; border-top:solid 3px #5892C4; left:0 !important; }

.highcharts-container { border:solid 1px #666; border-top:none; }

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Heading 1',
			useHTML: true
        },
		subtitle: {
            text: '<div>Sub Heading</div>',		
			align: 'left',
			useHTML: true

      },
	  navigation: {
            buttonOptions: {
                align: 'right',
                verticalAlign: "bottom",
				y: 0 ,
				x:0
            }
        },
        xAxis: {
            categories: [
                'Oct14',
				'Nov14',
				'Dec14',
				'Jan15',
				'Fed15',
				'Mar15'
            ]
        },
        yAxis: [{
            min: 0,
			lineColor: '#ccc',
            lineWidth: 1,
			gridLineWidth: 0,
			title: {
                text: 'Thousands'
            },
			 labels: {
                format: '${value}',
				style: { color: Highcharts.getOptions().colors[1]
                }				
            }
        }, {
            title: {
                text: '' // RHS Y axis label
            },
            opposite: true
        }],
        legend: {
            shadow: false,
			//useHTML: true
			itemMarginBottom: 20,
			//borderColor: '#C98657',
            //borderWidth: 1
        },
        tooltip: {
            shared: true
        },		
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
		pointWidth: 35,
            name: 'Avg. Spread Rate/Day',
			color: '#00B2F8',
            data: [60,65,70,73,76,80],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
			pointWidth: 25,
            name: 'Avg. Rig Rate/Day',
            color: '#D3EFFD',
            data: [15, 20, 25,30,35,40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, /*{
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
              ...