JSFiddle - React, Tailwind, and code Playground

by er1187

HTML

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

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

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

.negPos [class*=' highcharts-color-'] {
  fill: #5cb85c;
  stroke: none;
}
.negPos .highcharts-negative {
    fill: #d9534f !important;
    stroke: none;
}

JavaScript

Highcharts.chart(container, { 
					chart: {
				       className: 'negPos',
							type: 'column',
							spacingBottom: 20,
							style: {
			            		fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
								fontSize: '11px',
								fontWeight: 'lighter'   
						}
				    },
				    title: {
				        text: 'Highcharts',
				        align: 'center',
		        		style: {
				            fontSize: '15px',
				    		fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
							fontWeight: 'lighter'  
						}
				    },
				    xAxis: {
				        categories: [1,2,3,5,6]
				    },
				    yAxis: {
				        title: {
				            text: '%'
				        }
				    },
				  	tooltip: {
						borderWidth: 0,
						 style: {
					        		fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
									fontSize: '11px',
									align: 'center'
								},
					    formatter: function () {
					        return '<b>' + this.x + ': </b><br>' + Highcharts.numberFormat(this.y,1) + '%'
					    }
					},
				    plotOptions: {
				        bar: {
				            dataLabels: {
				                enabled: false
				            }
				        }
				    },
				    legend: {
				        layout: 'vertical',
				        verticalAlign: 'bottom',
				        borderWidth: 1,
				        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
				        shadow: true
				    },
				    series: [{
            	showInLegend : false,
				        data: [54,21,-3,18,5,-11]
				    }]
				}
     		  );