JSFiddle - React, Tailwind, and code Playground

by Bhabani Raju

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

JavaScript

$(function() {
	$('#container').highcharts({
		chart: {
			type: 'bar'
		},
		title: {
			text: 'Stacked bar chart'
		},
		"plotOptions": {
			"bar": {
				"lineWidth": 2,
				"shadow": false,
				stacking: 'normal'
			}
		},
		xAxis: {
			categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
		},
		yAxis: {
			min: 0,
			title: {
				text: 'Total fruit consumption'
			}
		},
		legend: {
			reversed: true
		},
		"tooltip": {
			"shadow": false,
			"useHTML": true,
			"borderWidth": 0,
			"borderRadius": 0,
			"borderColor": "#A1A1A1",
			"style": {
				"color": "#FFFFFF",
				"fontSize": "11px",
				"padding": "10px",
				"lineHeight": 1.6
			},
			"backgroundColor": {
				"linearGradient": [0.0, 0.0, 0.0, 0.2],
				"stops": [
					["0", "#AAAAAA"],
					["1", "#8C8C8C"]
				]
			}
		},
		series: [{
			name: 'John',
			data: [{
				y: 1
			}, {
				y: 2
			}, {
				y: 3
			}, {
				y: 4
			}, {
				y: 5
			}]
		}, {
			name: 'Jane',
			data: [{
				y: 5
			}, {
				y: 4
			}, {
				y: 3
			}, {
				y: 2
			}, {
				y: 1
			}]
		}, {
			name: 'Joe',
			data: [{
				y: 5
			}, {
				y: 2
			}, {
				y: 3
			}, {
				y: 4
			}, {
				y: 1
			}]
		}]
	});
});