JSFiddle - React, Tailwind, and code Playground

by prakhar230792

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
	"type": "svg",
	"title": {
		"text": null
	},
	"chart": {
		"type": "scatter",
		"events": {}
	},
	"plotOptions": {
		"series": {
			"showInLegend": false
		}
	},
	"legend": {
		"enabled": false
	},
	"tooltip": {
		"backgroundColor": "#5F5F5F",
		"borderColor": "#5F5F5F",
		"shadow": false,
		"style": {
			"color": "#FAFAFA",
			"opacity": 0.95
		}
	},
	"colors": [
		"#8CC350",
		"#5A6EAA",
		"#D755A5",
		"#1EBED7",
		"#F0A01E",
		"#9B8CE6",
		"#3CB5A0",
		"#3287D2",
		"#F0557D",
		"#C3D250",
		"#EB782D",
		"#78B4F5",
		"#5FAF69",
		"#AA5FA5",
		"#FA5A50",
		"#F5C841"
	],
	"xAxis": {
		"type": "category",
		"title": {
			"text": "10 Year Standard Deviation",
			"style": {}
		},
		"plotLines": [
			{
				"width": 1,
				"value": 4,
				"color": "#ccd6eb"
			}
		],
		"gridLineWidth": 0,
		"lineWidth": 0,
		"tickWidth": 0,
		"categories": [
			"January",
			"Februray",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		]
	},
	"yAxis": {
		"type": "linear",
		"title": {
			"text": "10 Year Annualized Return",
			"style": {}
		},
		"plotLines": [
			{
				"width": 1,
				"value": 50,
				"color": "#ccd6eb"
			}
		],
		"gridLineWidth": 0
	},
	"series": [
		{
			"marker": {
				"lineColor": "#000000",
				"fillColor": "#000000"
			},
			"data": [
				70,
				90,
				100,
				110,
				70,
				50,
				40,
				30,
				20,
				30,
				40,
				50
			]
		}
	],
	"credits": {
		"enabled": false
	}
});