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"></div>

JavaScript

// Create the chart
Highcharts.chart('container', {
  "title": {
    "text": "Efficient Frontier",
    "x": -20
  },
  legend: {
    enabled: false
  },
  "xAxis": {
    "title": {
      "text": "Volatility"
    },
    labels: {
      format: "{value}%"
    }
  },
  "yAxis": {
    "title": {
      "text": "Return"
    },
    labels: {
      format: "{value}%"
    }
  },
  "tooltip": {
    "headerFormat": "<span style=\"font-size:10px\">Volatility: {point.key:.4f}</span><table>",
    "pointFormat": "<tr><td style=\"padding:0\"><b>Return: {point.y:.4f}</b></td></tr>",
    "footerFormat": "</table>",
    "shared": true,
    "useHTML": true,
    crosshairs: true
  },
  "series": [{
    type: "line",
    "name": "Efficient Frontier",
    "data": [
      [0.1843104282413966, 0.0472449453861472],
      [0.1046424926914534, 0.05174446399435172],
      [0.07648353151656423, 0.05624398260255625],
      [0.07381651605609037, 0.060743501210760775],
      [0.07278078883069679, 0.06524301981896527],
      [0.07352208198990119, 0.06974253842716976],
      [0.07570986147248986, 0.07424205703537427],
      [0.07899337499579472, 0.07874157564357875],
      [0.08320098911095893, 0.08324109425178328],
      [0.08828919799652953, 0.08774061285998777],
      [0.09633222028970552, 0.09224013146819225],
      [0.10854987125530272, 0.09673965007639677],
      [0.12470209316653387, 0.10123916868460127],
      [0.14106517244875652, 0.10573868729280582],
      [0.24767923750083212, 0.11023820590101036]
    ]
  }, {
    type: "scatter",
    data: [{
      x: .25,
      y: .15,
      value: 'BE'
    }, {
      x: .15,
      y: .05,
      value: 'AAPL'
    }]
  }],
  plotOptions: {
    line: {
      marker: {
        enabled: true,
        radius: 3,
        //fillColor: "lightcoral"
      }
    },
    scatter: {
      marker: {
        symbol: "circle",
        radius: 3,
        fillColor: "crimson"
      },
      dataLabels: {
        enabled: true,
        color: "dimgray",
       ...