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/data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var options = {
	chart: {
		renderTo: 'container',
		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: {
		type: 'linear',
		title: {
			text: null
		},
		labels: {
			format: '{value:,.0f} Kč'
		},
		gridLineColor: '#eee',
		plotLines: [{
			color: '#fff',
			width: 2,
			value: 26480,
			zIndex: 1000,
			dashStyle: 'dash'
		}]
	},
	xAxis: {
		type: 'category',
		tickColor: '#fff',
		lineColor: "#ddd"
	},
  data: {
    googleSpreadsheetKey: '1uDk32nTFKmuxK2L3EFIoHILkJv5bQRtZ1e8eYtDxUBE',
    googleSpreadsheetWorksheet: "1",
    seriesMapping: [{
      color: 2 // take colors from column 2
    }],
    parsed: function (columns) {
    	MND = columns[1][1]
      options.yAxis.min = MND - 200;
      options.yAxis.plotLines[0].value = MND;
    }
  }
};

$(function(){
	var chart = new Highcharts.Chart(options);
});