JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var chart = new Highcharts.Chart({
chart: {
        renderTo: 'container',
        defaultSeriesType: 'scatter'
       },
title :{ 
        text:'overlap, scatter points on line for mouse events, trying to keep same color and legend so that mouse event might work, do not know how to do it'
        },

xAxis : { opposite : true },
yAxis : { reversed : true },
series: [{
name: '07-Jan-2006 07:30:00 AM' ,
data:[
[ 25.290,1.000 ],
[ 25.240,2.000 ],
[ 25.210,3.000 ],
[ 25.190,4.000 ],
[ 25.180,5.000 ],
[ 25.170,6.000 ],
[ 25.160,7.000 ],
[ 25.310,8.000 ],
[ 25.210,9.000 ],
[ 25.170,10.000 ],
[ 25.160,11.000 ],
[ 25.160,12.000 ],
[ 25.150,13.000 ],
  ]
  },{
 name: '07-Jan-2006 07:30:00 AM' ,
 type : 'line',
 marker: {enabled:false},
 enableMouseTracking: false,

 data:[
[ 25.290,1.000 ],
[ 25.240,2.000 ],
[ 25.210,3.000 ],
[ 25.190,4.000 ],
[ 25.180,5.000 ],
[ 25.170,6.000 ],
[ 25.160,7.000 ],
[ 25.310,8.000 ],
[ 25.210,9.000 ],
[ 25.170,10.000 ],
[ 25.160,11.000 ],
[ 25.160,12.000 ],
[ 25.150,13.000 ],
  ]
  }]
  });