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/exporting.js"></script>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

// Create the chart
Highcharts.chart('container', {
  "chart": {
    "width": 850
  },
  "credits": {
    "text": "www.rmcglobalsoft.com"
  },
  "legend": {
    "enabled": false
  },
  "plotOptions": {
    "line": {
      "marker": {
        "enabled": true,
        "radius": 3
      }
    },
    "scatter": {
      "marker": {
        "symbol": "circle",
        "radius": 3,
        "fillColor": "crimson"
      },
      "dataLabels": {
        "enabled": true,
        "color": "dimgray",
        formatter: function() {
          return this.point.investmentName;
        },
        style: {width:"100px"}
      }
    }
  },
  "series": [{
    "type": "line",
    "name": "Efficient Frontier",
    "data": [
      [8.312933865811976, 8.94327070885419],
      [7.269461771226908, 9.832152705504305],
      [6.525160038329222, 10.727678314426402],
      [6.139241407836058, 11.629892646053586],
      [5.890135335159271, 12.538841086302565],
      [5.7951713622697385, 13.45456929807014],
      [5.960157825803857, 14.3771232227339],
      [6.3678922133784885, 15.30654908165976],
      [6.975938712189034, 16.24289337772009],
      [7.737214636645705, 17.186202896813963],
      [8.611176429102303, 18.13652470939997],
      [9.566991606300574, 19.093906172031016],
      [10.582504289591368, 20.058394928901468],
      [11.642103135847478, 21.03003891339663],
      [12.734788319972001, 22.008886349654432]
    ],
    "tooltip": {
      "headerFormat": "<span></span>",
      "pointFormat": "<b>Std Dev:</b> {point.x:.2f} %<br><b>Return:</b> {point.y:.2f} %"
    }
  }, {
    "type": "scatter",
    "data": [{
      "x": 12.734788319972001,
      "y": 22.0088863496544,
      "investmentName": "Fuller & Thaler Gross",
      "sharpeRatio": 0.454683067326186
    }, {
      "x": 14.3181164501716,
      "y": 18.7825315769046,
      "investmentName": "Clifton S&P 400 Gross",
      "sharpeRatio": 0.349529437706648
    }, {
      "x": 8.5946502789956,
      "y": 8.73224204773708,
     ...