JSFiddle - React, Tailwind, and code Playground

by mischah

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="pageWrapper">
	<div id="myChart-wrapper">
		<div id="myChart-chart"></div>
		<ul id="myChart-legend">
	    	<li><span class="color"></span><a href="#">Dummy</a></li>
		</ul>
	</div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
    font-size: 11px;
}

#myChart-wrapper {
  position: relative;
  margin-bottom: 15px;
}
#myChart-chart {
  height: 400px;
}

#myChart-legend {
  background: #FFF;
  border: 1px solid #BEBEBE;
  list-style-type: none;
  overflow: hidden;
  padding: 5px 8px 5px 8px;
  margin: 0;
}
#myChart-legend li {
  float: left;
  margin: 0 10px 0 0;
}
#myChart-legend li .color {
  border-radius: 2px;
  display: inline-block;
  height: 12px;
  width: 16px;
  background: #CCC;
  vertical-align: middle;
}
#myChart-legend li .color.line {
  height: 2px;
}
#myChart-legend li a {
  color: #CCC;
  display: inline-block;
  margin-left: 5px;
  vertical-align: text-top;
}
#myChart-legend li a:hover,
#myChart-legend li a[data-visibility='true'] {
  color: #666;
  text-decoration: none;
}
#myChart-legend li a:focus {
  outline: 0;
}
#myChart-legend .myChart-legend-placeholder {
  height: 10px;
  width: 70px;
  margin-top: 2px;
  outline: 1px dotted #BEBEBE;
}

JavaScript

var myChart = {};

myChart.options = {
	colors: [
		'rgb(1,102,169)',
		'rgb(25,159,255)',
		'rgb(244,129,34)',
		'rgb(158,51,148)'
	],
	tooltip: {
		enabled: false
	},
	legend: {
		enabled: false
	},
	title: {
		text: 'Freitag, 09.08.2013',
	},
	xAxis: {
		type: 'datetime',
		lineWidth: 0,
		tickmarkPlacement: 'on',
		title: {
			enabled: false
		},
		gridLineColor: '#BEBEBE',
		gridLineDashStyle: 'longdash',
		gridLineWidth: 0.5,
		showLastLabel: true,
		min: Date.UTC(2013,7,9,0,0,0),
		dateTimeLabelFormats: {
			day: '%H:%M'
		}
	},
	yAxis: {
		min: 0,
		max: 4,
		showFirstLabel: false,
		gridLineColor: '#BEBEBE',
		gridLineDashStyle: 'longdash',
		gridLineWidth: 0.5
	},
	plotOptions: {
		series: {
			pointStart: Date.UTC(2013,7,9,0,15,0),
			pointInterval: 15 * 60 * 1000 // 15 minutes
		},
		area: {
			stacking: 'normal',
			lineColor: '#FFF',
			lineWidth: 1,
			marker: {
				enabled: false,
				states: {
					hover: {
						enabled: false
					}
				}
			}
		}
	},
	series: [
		{
			visible: true,
			id: 0,
			type: 'area',
			name: 'Foo',
			data: [
				0.25, 0.29, 0.23, 0.22, 0.17, 0.14, 0.20, 0.20, 0.26, 0.19, 0.18, 0.17, 0.15, 0.24, 0.20, 0.24, 0.21, 0.26, 0.17, 0.23, 0.70, 0.37, 0.47, 0.33, 0.29, 0.25, 0.30, 0.39, 0.47, 0.51, 0.17, 0.37, 0.28, 0.20, 0.18, 0.21, 0.21, 0.35, 0.49, 0.39, 0.46, 0.54, 0.54, 0.47, 0.45, 0.40, 0.38, 0.43, 0.53, 1.92, 2.17, 0.93, 1.13, 2.46, 0.48, 0.52, 0.37, 0.29, 0.33, 0.39, 0.76, 1.21, 0.41, 0.41, 0.31, 0.34, 0.36, 0.46, 0.39, 0.82, 0.44, 0.48, 0.54, 0.48, 0.51, 0.30, 0.29, 0.23, 0.30, 0.31, 0.39, 0.30, 0.27, 0.26, 0.25, 0.33, 0.29, 0.39, 0.39, 0.50, 0.40, 0.36, 0.24, 0.17, 0.26, 0.31
			]
		},
		{
			visible: true,
			id: 1,
			type: 'area',
			name: 'Bar',
			data: [
				0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.12, 0.36, 0.37, 0.38, 0.39, 0.39, 0.39, 0.39, 0.39, 0.39, 0.39, 0.39, 0.39, 0.39, 0.39, 0.39, 0.39, 0.02, 0, 0,...