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":""},"xAxis":{"labels":{"format":"{value}%"},"title":{"text":"Returns"},"gridLineWidth":0},"yAxis":[{"lineWidth":1,"title":{"text":"Distribution"}}],"plotOptions":{"series":{"dataLabels":{"enabled":true,"format":"{point.name}"}},"column":{"borderWidth":0,"pointWidth":5,"tooltip":{"headerFormat":"<span style=\"color:{point.color}\">{point.x:.2f}%</span><br/>","pointFormat":"<span>Frequency: {point.y}</span>"}}},"series":[{"name":"NISA Long Duration Government/Credit Strategy (Gross)","type":"column","color":"#5187B980","data":[[-5.6000000000000005,1],[-5.4,0],[-5.2,0],[-5,0],[-4.8,0],[-4.6,1],[-4.3999999999999995,0],[-4.2,0],[-4,0],[-3.8,0],[-3.6000000000000005,0],[-3.4000000000000004,0],[-3.2,0],[-3,1],[-2.8000000000000003,1],[-2.6,1],[-2.4,0],[-2.1999999999999997,0],[-2,0],[-1.8000000000000003,1],[-1.6,0],[-1.4000000000000001,0],[-1.2,1],[-1,1],[-0.8,2],[-0.6,2],[-0.4,3],[-0.2,2],[0,1],[0.2,2],[0.4,1],[0.6,1],[0.8,0],[1,2],[1.2,0],[1.4000000000000001,1],[1.6,2],[1.8000000000000003,1],[2,3],[2.1999999999999997,0],[2.4,0],[2.6,1],[2.8000000000000003,0],[3,0],[3.2,2],[3.4000000000000004,1],[3.6000000000000005,1],[3.8,0],[4,1],[4.2,0],[4.3999999999999995,2],[4.6,0],[4.8,0],[5,0],[5.2,0],[5.4,0],[5.6000000000000005,0],[5.800000000000001,0],[6,0],[6.2,1],[6.4,0]],"pointPadding":0},{"name":"Oakbrook...