JSFiddle - React, Tailwind, and code Playground

by amrutaJgtp

HTML

<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/highstock.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 () {
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {

        $('#container').highcharts({
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'USD to EUR exchange rate over time'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },
            tooltip:{
                millisecond: '%H:%M:%S.%L',
	second: '%H:%M:%S',
	minute: '%H:%M',
	hour: '%H:%M',
	day: '%e. %b',
	week: '%e. %b',
	month: '%b \'%y',
	year: '%Y'  
            },
            xAxis: {
                type: 'datetime',
                 dateTimeLabelFormats: {
                 millisecond: '%H:%M:%S.%L',
	second: '%H:%M:%S',
	minute: '%H:%M',
	hour: '%H:%M',
	day: '%e. %b',
	week: '%e. %b',
	month: '%b \'%y',
	year: '%Y'
            	},
                showFirstLabel: true,
                startOnTick: false,
                minPadding: 0,
                units: [
                        ['year', [3]]
                ],
            },
            yAxis: {
                title: {
                    text: 'Exchange rate'
                },
                min:0
            },
            legend: {
                enabled: false
            },
			 scrollbar : {
        		enabled:true
        	},
            series: [{
                type: 'column',
                name: 'USD to EUR',
                data: data
            }]
        });
    });
});