JSFiddle - React, Tailwind, and code Playground
by Anil Vangari
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<div id="container"></div>
CSS
#container {
max-width: 800px;
height: 400px;
margin: 1em auto;
}
JavaScript
Highcharts.chart('container', {
"credits": {
"text": "PRISM",
"href": ""
},
"chart": {
"type": "line",
"zoomType": "x"
},
"title": {
"text": ""
},
"subtitle": {
"text": null
},
"xAxis": {
"type": "datetime",
"dateTimeLabelFormats": {
"month": "%b<br/>%Y"
},
"labels": {
"step": 6
}
},
"yAxis": {
"min": -93.8132551714,
"max": 45.9012159297,
"labels": {
"format": "{value}%"
},
"lineWidth": 1,
"title": {
"text": "Returns (%)"
}
},
"plotOptions": {
"series": {
"animation": false,
"marker": {
"enabled": false
}
}
},
"tooltip": {
"headerFormat": "<span style=\"font-size:10px\">{point.key}</span><table>",
"pointFormat": "<tr><td style=\"color:{series.color};padding:0\">{series.name}: </td><td style=\"padding:0\"><b>{point.y:.2f} %</b></td></tr>",
"footerFormat": "</table>",
"shared": true,
"useHTML": true
},
"series": [{
"name": "Expected Cumulative Alpha",
"data": [
[1125205200000, 0],
[1128056400000, 0.4867531027],
[1130734800000, 0.9758754912],
[1133330400000, 1.4673786982],
[1136008800000, 1.9612743122],
[1138687200000, 2.4575739785],
[1141106400000, 2.9562893988],
[1143781200000, 3.4574323319],
[1146373200000, 3.9610145937],
[1149051600000, 4.4670480579],
[1151643600000, 4.9755446556],
[1154322000000, 5.4865163763],
[1157000400000, 5.9999752677],
[1159592400000, 6.5159334361],
[1162270800000, 7.034403047],
[1164866400000, 7.5553963248],
[1167544800000, 8.0789255535],
[1170223200000, 8.605003077],
[1172642400000, 9.1336412992],
[1175317200000, 9.6648526843],
[1177909200000, 10.1986497573],
[1180587600000, 10.7350451042],
[1183179600000, 11.274051372],
[1185858000000, 11.8156812696],
[1188536400000, 12.3599475674],
...