JSFiddle - React, Tailwind, and code Playground

by prakhar230792

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
	"type": "png",
	"title": {
		"text": null
	},
	"chart": {
		"type": "line"
	},
	"plotOptions": {
		"line": {
			"marker": {
				"enabled": false
			}
		},
		"series": {
			"showInLegend": false
		}
	},
	"legend": {
		"enabled": false
	},
	"colors": [
		"#8CC350",
		"#5A6EAA",
		"#D755A5",
		"#1EBED7",
		"#F0A01E",
		"#9B8CE6",
		"#3CB5A0",
		"#3287D2",
		"#F0557D",
		"#C3D250",
		"#EB782D",
		"#78B4F5",
		"#5FAF69",
		"#AA5FA5",
		"#FA5A50",
		"#F5C841"
	],
	"xAxis": {
		"type": "category",
		"title": {
			"text": null
		},
		"categories": [
			"2018-12-30T18:30:00.000Z",
			"2017-12-30T18:30:00.000Z",
			"2016-12-30T18:30:00.000Z",
			"2015-12-30T18:30:00.000Z",
			"2014-12-30T18:30:00.000Z",
			"2013-12-30T18:30:00.000Z",
			"2012-12-30T18:30:00.000Z",
			"2011-12-30T18:30:00.000Z",
			"2010-12-30T18:30:00.000Z",
			"2009-12-30T18:30:00.000Z"
		]
	},
	"yAxis": {
		"type": "linear",
		"title": {
			"text": null
		}
	},
	"series": [
		{
			"name": "Benchmark S&P 500 Index",
			"data": [
				23245,
				23005,
				22217,
				20500,
				21025,
				19537,
				20015,
				18058,
				17097,
				14028.999
			]
		},
		{
			"name": "Blue Chip Growth Fund",
			"data": [
				23829,
				22223,
				23017,
				21845,
				20856,
				20013,
				18046,
				19919,
				19004,
				15078
			]
		}
	],
	"credits": {
		"enabled": false
	}
});