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": 4
    },
    "tickInterval": 7776000000
  },
  "yAxis": {
    "min": -5.0801484528,
    "max": 214.7183348043,
    "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;font-weight:bold;\">{series.name}: </td><td style=\"padding:0\"><b>{point.y:.2f}%</b></td></tr>",
    "footerFormat": "</table>",
    "shared": true,
    "useHTML": true,
    "xDateFormat": "%b-%Y"
  },
  "series": [{
    "name": "Expected Cumulative Alpha",
    "data": [
      [691308000000, 0],
      [694159200000, 0.2531121092],
      [696837600000, 0.5068648758],
      [699343200000, 0.7612599214],
      [702018000000, 1.0162988716],
      [704610000000, 1.2719833563],
      [707288400000, 1.5283150094],
      [709880400000, 1.785295469],
      [712558800000, 2.0429263772],
      [715237200000, 2.3012093804],
      [717829200000, 2.5601461292],
      [720507600000, 2.8197382783],
      [723103200000, 3.0799874865],
      [725781600000, 3.340895417],
      [728460000000, 3.602463737],
      [730879200000, 3.8646941182],
      [733554000000, 4.1275882362],
      [736146000000, 4.391147771],
      [738824400000, 4.6553744069],
      [741416400000, 4.9202698325],
      [744094800000, 5.1858357404],
      [746773200000, 5.4520738279],
      [749365200000, 5.7189857961],
      [752043600000, 5.9865733509],
     ...