JSFiddle - React, Tailwind, and code Playground

by Guillaume Seguin

HTML

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

<div class="point">
<button>Test</button>
</div>
<div id="container" style="width: 231px; height: 200px; border:1px solid black; margin: 10px auto"></div>

CSS

.point {
  position: relative;
}

button {
    position: absolute;
    left: 400px;
    z-index: 99;
}

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
    	chart = new Highcharts.Chart(
        	{
	chart: {
		renderTo: 'container',
		type: 'bar',
		backgroundColor: '#14181C',
		margin: 0,
		borderRadius: 0
	},
	title: {
		floating: true,
		text: ''
	},
	credits: {
		enabled: false
	},
	exporting: {
		enabled: false
	},
	xAxis: {
		lineColor: '#456',
		minPadding: 0,
		maxPadding: 0,
		categories: ['Blue', 'Red', 'Black', 'Purple', 'Yellow'],
		title: {
			text: null
		},
        labels: {
			//useHTML: true,
			x: 7,
			align: 'left',
			style: {
				color: 'white',
				fontWeight: 'bold',
				fontSize: 12,
				textTransform: 'uppercase',
				letterSpacing: '1px',
				fontFamily: 'freight-sans-pro, sans-serif',
				pointerEvents: 'none',
				zIndex: 0
			}
        }
    },
	legend: {
		enabled: false
	},
	yAxis: {
		min: 0,
		tickInterval: 1,
		title: {
			enabled: false
		},
		gridLineColor: '#14181C',
		labels: {
			enabled: false
		}
	},
	colors: [
		'#456'
	],
	tooltip: {
		backgroundColor: '#f00',
		borderColor: '#9ab',
		useHTML: true,
		formatter: function() {
			return 	''+'<p style="color:#9ab;font-family:Lucida Grande,sans-serif;font-size:11px;text-align:center;margin:0;padding:2px 7px;">' + 
					'<strong style="color:#fff;font-weight:normal;font-size:16px;">' + this.y +' film' + (this.y == 1 ? '' : 's') + '</strong></p>';
		},
		style: {
			zIndex: 100
		}
	},
	plotOptions: {
		bar: {
			pointWidth: 24,
			pointPadding: 0.5,
			borderWidth: 0,
			shadow: false,
			minPointLength: 2,
			animation: false
		}
	},
	series: [{
		data: [23,21,15,4,1]
	}]
}
        );
	});
});