JSFiddle - React, Tailwind, and code Playground

by Anuradha Pai

HTML

<div id="container-graph" style="width: 300px;height: 200px; margin: 0 auto"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="chart.js"></script>

JavaScript

$(document).ready(function(){



Highcharts.chart('container-graph', {

	chart: {
		//redraw: true,
		type: 'candlestick',
    panning : true,

    },
    title: {
      text: null
    },
	credits: {
		enabled: true
	},
   tooltip: {
		enabled: false,
		 followTouchMove: false
	},
    xAxis: {	
		lineColor: '#c5c4c4',
		type: 'datetime', // Added to convert UTC to actual date
		tickInterval: 30 * 24 * 3600 * 1000,              
		min: Date.UTC(2016, 0, 1),
		max: Date.UTC(2016, 4, 1), 
		gridLineWidth: 0,
		tickLength: 0,
		showFirstLabel: true,
        labels :{
		// rotation: 0
		}		
    }, 
    yAxis: {
      gridLineColor: '#c5c4c4',
      //opposite: false,
      labels: {
          enabled: true
      },
      title: {
          text: null
      },
      tickPositions: [300, 579, 669, 739, 799, 850],
      min: 300,
      max: 850,
      gridLineWidth: 1,			  
    },

    plotOptions: {
	  line: {
        dataLabels: {
          enabled: true,
          allowOverlap: true,
          color: '#38393A',
        },
      },
    },
    series: [{  
	   showInLegend: false, 
	   data: [
		[Date.UTC(2016, 0, 1), 500, 556,300,320],
		[Date.UTC(2016, 1, 1), 450,489,400,400],
		[Date.UTC(2016, 2, 1), 430,489,400,400],
		[Date.UTC(2016, 3, 1), 460,489,400,400],
		[Date.UTC(2016, 4, 1), 510,556,300,320],
		[Date.UTC(2016, 5, 1), 580,590,300,320],
		[Date.UTC(2016, 6, 1), 670, 700, 650,657],
		[Date.UTC(2016, 7, 1), 540,556,300,320],
		[Date.UTC(2016, 8, 1), 780, 800, 770,777],
		[Date.UTC(2016, 9, 1), 810, 890, 800, 805],
		[Date.UTC(2016, 10, 1), 650, 650, 500, 630],
		[Date.UTC(2016, 11, 1), 650, 700, 620, 635]
	],
		dataLabels: {
          enabled: true,
        },
    }],
	responsive: {
        rules: [{
          condition: {
            maxWidth: 729
          },

          chartOptions: {
		yAxis: {		
			labels: {
			enabled: true
			},
		},
			xAxis: {
			min: Date.UTC(2016, 0, 1),
			max: Date.UTC(2016, 4, 1)
			}
		}
      }]
    }	
	});
});	
	...