JSFiddle - React, Tailwind, and code Playground

by Charissima

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>

<div style="width:75%; text-align:right; font-size:14px;">
	y: <span id="value">	0  </span>		
</div>

<div id="container" style="width:80%; height:450px;"></div>

JavaScript

var dataX = [ [1378706460000,3], [1378706520000,6], [1378706580000,9], [1378706640000,12] ];

var data = [];
data.push([1378706460000,3.7]);
data.push([1378706520000,6]);
data.push([1378706580000,9]);
data.push([1378706640000,12]);
                 	
$(function () {

	$(document).ready(function() {

		Highcharts.setOptions({
			global : {
				useUTC : false
			},
			lang: {
				months: ['Jan.', 'Feb.', 'März', 'April', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
				weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
				decimalPoint: ',',
				thousandsSep: '.'
			},
			chart : {
				zoomType: 'x'
			},
			scrollbar: {
				enabled: true
			},
			navigation: {
				buttonOptions: {
					align: 'left'
				}
			},
			navigator: {
				enabled: true,
				top: 388,
				outlineColor: '#C0C0C0',
				outlineWidth: 1
			},
			tooltip: {
				enabled: true,
				xDateFormat: '%d.%m.%Y %H:%M:%S'
			},
			credits: {
				enabled: false
			},											
			title: {
				text : ''
			},
			xAxis: {
				type: 'datetime',
				lineColor: '#EEEEEE',
				tickColor: '#EEEEEE',
				gridLineColor: '#EEEEEE',
				minorGridLineColor: '#FFFFFF', // Zwischenlinien weiss, d.h. unsichtbar				
				gridLineWidth: 1,
				minRange: 1 * 60 * 1000,
				range: 3 * 60 * 1000,
				labels: {
					enabled: true
				}
			},
			yAxis: {
				lineColor: '#EEEEEE',
				tickColor: '#EEEEEE',			
				gridLineColor: '#EEEEEE',				
				opposite: true, // y-Achse rechts
				offset: 5,
				lineWidth: 1,
				tickWidth: 1,
				tickInterval: 1,										
				minorGridLineColor: '#FFFFFF', // Zwischenlinien weiss, d.h. unsichtbar			
				minorTickInterval: 'auto',
				minorGridLineWidth: 0,
	         minorTickColor: '#FFFFFF',
	         minorTickWidth: 1,
	         endOnTick: false,
				title: {
					enabled: false
				},
				labels: {
					formatter: function () {
						return Highcharts.numberFormat(this.value,...