JSFiddle - React, Tailwind, and code Playground

by prakhar230792

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
  "type": "svg",
  "title": {
    "text": null
  },
  "chart": {
    "type": "scatter",
    events: {
      load: function() {
        var xPlotLine = Highcharts.charts[0].xAxis[0].toPixels(45, true),
          plotSizeX = this.plotSizeX,
          plotLeft = this.plotLeft,
          leftSide = xPlotLine,
          rightSide = plotSizeX - leftSide;

        console.log('Left side: ' + leftSide);
        console.log('Right side: ' + rightSide);
        console.log('Full x plot area: ' + (leftSide + rightSide));
      }
    }
  },
  "plotOptions": {
    "scatter": {
      "marker": {
        "lineWidth": 2
      }
    },
    "series": {
      "showInLegend": false
    }
  },
  "legend": {
    "enabled": false
  },
  "tooltip": {
    "backgroundColor": "#5F5F5F",
    "borderColor": "#5F5F5F",
    "shadow": false,
    "style": {
      "color": "#FAFAFA",
      "opacity": 0.95
    }
  },
  "colors": [
    "#8CC350",
    "#5A6EAA",
    "#D755A5",
    "#1EBED7",
    "#F0A01E",
    "#9B8CE6",
    "#3CB5A0",
    "#3287D2",
    "#F0557D",
    "#C3D250",
    "#EB782D",
    "#78B4F5",
    "#5FAF69",
    "#AA5FA5",
    "#FA5A50",
    "#F5C841"
  ],
  "xAxis": {
    "type": "linear",
    "title": {},
    lineWidth: 0,
    gridLineWidth: 0,
    plotLines: [{
      color: '#000000',
      width: 1,
      value: 45
    },{
                    id: 'left1',
                    color: '#FFFFFF',
                    width: 0,
                    zIndex: 5,
                    value: 20,
                    label: {
                      text: 'Lower return, lower volatility',
                      rotation: 0,
                      verticalAlign: 'bottom',
                      x: 10,
                      y: -10,
                      style: {
                        width: 100 + 'px',
                        fontWeight: 'bold'
                      }
                    }
                  }]
  },
  "yAxis": {
    "type": "linear",
    "title": {},
 ...