JSFiddle - React, Tailwind, and code Playground

by prakhar230792

HTML

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

<div id="container" style="min-width: 500px;"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    plotBackgroundColor: '#C8E4f7',
    events: {
      load: function() {
        var xAxis = this.xAxis[0],
          halfOfPlotArea = this.plotSizeX / 2,
          plotLines = [{
            id: 'random',
            color: '#FFFFFF',
            width: 1,
            value: 15
          }, {
            id: 'left1',
            color: '#FFFFFF',
            width: 0,
            zIndex: 5,
            label: {
              text: 'Lower return, lower volatility',
              rotation: 0,
              verticalAlign: 'bottom',
              x: 10,
              y: -10,
              style: {
                width: halfOfPlotArea + 'px',
                fontWeight: 'bold'
              }
            }
          }, {
            id: 'left2',
            color: '#FFFFFF',
            width: 0,
            zIndex: 5,
            label: {
              text: 'Higher return, lower volatility',
              rotation: 0,
              verticalAlign: 'top',
              x: 10,
              y: 15,
              style: {
                width: halfOfPlotArea + 'px',
                fontWeight: 'bold'
              }
            }
          }, {
            id: 'right1',
            color: '#FFFFFF',
            width: 0,
            zIndex: 5,
            label: {
              align: 'right',
              text: 'Higher return, lower volatility',
              rotation: 0,
              verticalAlign: 'bottom',
              x: -10,
              y: -10,
              style: {
                width: halfOfPlotArea + 'px',
                fontWeight: 'bold'
              }
            }
          }, {
            id: 'right2',
            color: '#FFFFFF',
            width: 0,
            zIndex: 5,
            label: {
              align: 'right',
              text: 'Higher return, higher volatility - A very very very very very very long label',
              rotation: 0,
             ...