JSFiddle - React, Tailwind, and code Playground

by slaws

HTML

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/highcharts.css">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.2/papaparse.js" integrity="sha512-QY0JdIbnri8lhK0C1G0qSFoy2fmz3f+5u/SzwfCEZ8+rhZF5rNXk7UBNJIM20YKNIM3InJGH+uQOfNo08TL/NQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="myhighchart"></div>

CSS

.highcharts-point-inactive {
  opacity: 1.0;
}

.highcharts-line-series .inactive {
  opacity: 0.2 !important;
}

.highcharts-line-series image.inactive {
	fill: #f7ebf7 !important;
	stroke: #f7ebf7 !important;
}

.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
  opacity: 1.0;
}

.highcharts-grid {
	display: none;
}
.highcharts-axis .highcharts-axis-line {
	display: none;
}
.highcharts-plot-border {
	stroke: black;
	stroke-width: 2;
}
.highcharts-axis .highcharts-tick {
	stroke: black;
	stroke-width: 2;
}
.highcharts-yaxis .highcharts-minor-tick {
	display: none;
}
.highcharts-axis.highcharts-xaxis .highcharts-minor-tick {
	stroke: black;
	stroke-width: 2;
}
.highcharts-series-group .highcharts-markers {
	cursor: pointer;
}
.highcharts-series-0.highcharts-color-0,
.highcharts-series-0.highcharts-color-0 .highcharts-color-0,
.highcharts-series-group .highcharts-markers.highcharts-series-0.highcharts-color-0,
.highcharts-series-group .highcharts-series.highcharts-series-0.highcharts-color-0 {
	fill: #990099;
	stroke: #990099;
}
.highcharts-series-1.highcharts-color-1,
.highcharts-series-1.highcharts-color-2 .highcharts-color-0,
.highcharts-series-group .highcharts-markers.highcharts-series-1.highcharts-color-1,
.highcharts-series-group .highcharts-series.highcharts-series-1.highcharts-color-1 {
	fill: #990099;
	stroke: #990099;
}
.highcharts-series-2.highcharts-color-2,
.highcharts-series-2.highcharts-color-2 .highcharts-color-2,
.highcharts-series-group .highcharts-markers.highcharts-series-2.highcharts-color-2,
.highcharts-series-group .highcharts-series.highcharts-series-2.highcharts-color-2 {
	fill: #990099;
	stroke: #990099;	
}
.highcharts-series-group...

JavaScript

(function($) { // encapsulate $


    /* Create the chart from the options and make a callback to preprocess the
       chart.
     */
    Highcharts.chart('myhighchart', {
      "chart": {
        "styledMode": true,
        "type": "line"
      },
      "exporting": {
        "allowHTML": true,
        "chartOptions": {
          "chart": {
            "events": {}
          },
          "plotOptions": {
            "series": {
              "dataLabels": {
                "enabled": true
              }
            }
          }
        }
      },
      "legend": {
        "align": "left",
        "floating": true,
        "itemWidth": 325,
        "verticalAlign": "top",
        "width": 650,
        "x": 80,
        "y": 80
      },
      "plotOptions": {
        "series": {
          "allowOverlap": false,
          "animation": true,
          "borderWidth": 1,
          "borderColor": "#cccccc",
          "cursor": "pointer",
          "dataLabels": {
            "color": "#aaaaaa",
            "enabled": true,
            "shape": "connector",
            "style": {
              "fontSize": "14px",
              "fontWeight": "normal"
            },
            "useHTML": true,
            "y": -20
          },
          "label": {
            "connectorAllowed": true
          },
          "marker": {
            "enabled": true
          },
          "selected": true,
          "states": {
            "inactive": {
              "enabled": false
            }
          },
          "stickyTracking": true
        }
      },
      "series":[
    {
        "data": [],
        "color": "#cc0000",
        "dataLabels": {
            "enabled": false
        },
        "enableMouseTracking": true,
        "name": "Emerging PV",
        "stickyTracking": false,
		"findNearestPointBy": 'y'
    },
    {
        "data": [
            {
                "x": 667785600000,
                "mouseover": true,
                "y": 6.4,
                "area":...