JSFiddle - React, Tailwind, and code Playground

by arielkotch

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

JavaScript

$(function () {
        $('#container').highcharts({
           chart: {
		type: 'column',
    renderTo:'#container'
	},
	title: {
		text: ''
	},
	xAxis: {
		categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Total fruit consumption'
		},
		stackLabels: {
			enabled: true,
			style: {
				fontWeight: 'bold',
				color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
			}
		}
	},
	tooltip: {
		headerFormat: '<b>{point.x}</b><br/>',
		pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
	},
	plotOptions: {
		column: {
			stacking: 'normal',

		}
	},
	series: [{
			name: 'John',
			borderColor: '#0000FF',
			color: '#FFFFFF',
			data: [5, 3, 4, 7, 2]
		}, {
			name: 'Jane',
			borderColor: '#0000FF',
			color: '#0000FF',
			data: [2, 2, 3, 2, 1]
		},
		{

			//5-width
			//height 
			data: [
				[4, 10],
				[0, 10]
			],
			lineWidth: 2,
			dashStyle: "Dash",
			lineColor: 'black',
			type: 'scatter',
			marker: {
				enabled: false
			},
			showInLegend: false,
			enableMouseTracking: false
		},
		{
			data: [
				[0, 20]
			],
			lineWidth: 2,
			dashStyle: "Dash",
			lineColor: 'black',
			type: 'scatter',
			marker: {
				enabled: false
			},
			showInLegend: false,
			enableMouseTracking: false
		}
	]
        });
    });