JSFiddle - React, Tailwind, and code Playground

by Eskel

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

JavaScript

$(function () {
	$('#container').highcharts({
		chart: {
			type: 'column',
			width: 800,
			height: 400,
			spacingTop: 50,
			spacingBottom: 50,
			spacingLeft: 50,
			spacingRight: 50
		},
		credits: {
			enabled: false
		},
		exporting: {
			enabled: false
		},
		title: {
			text: null
		},
		legend: {
			enabled: false
		},
    tooltip: {
      enabled: true,
      hideDelay: 0,
      animation: false,
      backgroundColor: '#f5f5f5',
      borderWidth: 0,
      shadow: false,
      pointFormat: '{point.y} Kč',
    },
		plotOptions: {
			column: {
				borderWidth: 0,
				groupPadding: 0
			}
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				format: '{value:,.0f} Kč'
			},
			min: 25000,
			gridLineColor: '#eee',
			plotLines: [{
				color: '#fff',
				width: 2,
				value: 26480,
				zIndex: 1000,
				dashStyle: 'dash'
			}]
		},
		xAxis: {
			type: 'category',
			tickColor: '#fff',
			lineColor: "#ddd"
		},
		series: [{
			data: [{
				name: 'MND',
				color: '#a8bf33',
				y: 26480
			}, {
				name: 'Pražská plynárenská',
				color: '#737373',
				y: 29295
			}, {
				name: 'ČEZ',
				color: '#e56a0a',
				y: 31392
			}, {
				name: 'E.ON',
				color: '#dd1c1d',
				y: 27945
			}, {
				name: 'RWE',
				color: '#006fc0',
				y: 33669
			}, {
				name: 'Bohemia Energy',
				color: '#ffc000',
				y: 28934
			}]
		}]
	});
});