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": "column"
  },
  "title": {
    "text": ""
  },
  "subtitle": {
    "text": null
  },
  "xAxis": {
    "type": "datetime",
    dateTimeLabelFormats: {
    month: "%b<br/>%Y"
    },
    "labels": {
      //"rotation": -60,
      useHTML: true
    },
    //tickInterval: 24 * 3600 * 1000* 90
  },
  "yAxis": {
    "min": -9.68,
    "max": 10.38,
                lineWidth: 1,
                labels: {
                format: "{value}%"
                },
    "title": {
      "text": "Returns (%)"
    }
  },
  "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
  },
  "plotOptions": {
    "column": {
      "pointPadding": 0.2,
      "borderWidth": 0
    },
    "series": {
      "animation": false
    }
  },
  "series": [{
    "name": "BlackRock Multi Strategy - Composite",
    "data": [
      [1262239200000, 1.68],
      [1264917600000, -4.23],
      [1267336800000, 1.4],
      [1270011600000, 6.37],
      [1272603600000, -0.09],
      [1275282000000, -9.33],
      [1277874000000, -2.51],
      [1280552400000, 8.55],
      [1283230800000, -3.84],
      [1285822800000, 10.38],
      [1288501200000, 4.31],
      [1291096800000, -3.01]
    ]
  }, {
    "name": "BGI MultiStrat Custom",
    "data": [
      [1262239200000, 1.69],
      [1264917600000, -4],
      [1267336800000, 1.21],
      [1270011600000, 6.14],
      [1272603600000, -0.12],
      [1275282000000, -9.68],
      [1277874000000, -2.4],
      [1280552400000, 8.67],
      [1283230800000, -3.57],
      [1285822800000, 9.51],
      [1288501200000, 3.68],
      [1291096800000, -3.22]
    ]
  }]
});