JSFiddle - React, Tailwind, and code Playground

by Rickysingh2000

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

function GetValue(value) { if(value.name=='EndValue') { return value.y; } else{return '';}} 
 
var chart = new Highcharts.Chart({ chart:{renderTo:  'container' , zoomType: 'x' }, title: {  text: ' ', margin: 0, style: {fontWeight: 'bold',fontSize:'15px' }, x: 0,y:0 }, credits:{enabled: false}, legend: 

{layout: 'horizontal',align: 'center',verticalAlign: 'bottom'} ,xAxis:{ lineColor: 'black', tickLength:0 ,tickWidth:0, gridLineColor:'black', 
min:0, max:5, lineWidth:0, gridLineWidth: 0.5,  minorGridLineWidth: 0, tickInterval:1,  labels: { formatter: function () {return '';} , enable: true, style:{fontSize:'9px'}},  minorTickInterval:'auto',  minorTickWidth: 0, minorGridLineColor:'black', minorTickInterval:0.1, startOnTick:true, endOnTick:true, title:{ text:'', style:{color: 'black'}}}, 
 
 yAxis:[ {  lineColor:'black',  min: 131,max: 229, tickLength:0 , tickWidth:0,  tickInterval:5,  minorTickInterval:2.5, minorTickWidth: 0, gridLineWidth: 0.5,  minorGridLineWidth: 0,  

gridLineColor:'black', minorGridLineColor:'black',  startOnTick: true, endOnTick: true,   labels: { formatter: function (){return this.value;}, x:-4, style:{fontSize:'8px', textShadow:false,color:'black'} }, 

lineWidth:0,   title:  {text: 'PERCENT PASSING', style:{color: 'black', font: '8px Arial'}, x:5 } } ],  
 
 tooltip:{formatter:function(){ var s = '' + this.y + '';return s;}, shared:true},  
  
 series: [  { type:'line', linecap:'square', enableMouseTracking: false, color:'url(#highcharts-default-pattern-0)' , showInLegend:false, marker:{radius:0, symbol: 'circle'}, lineWidth: 25,  formatter:function

(){return GetValue(this); } , dataLabels: {enabled:true, crop:false, style: {fontWeight:'normal',fontSize:'9px', textShadow: false },  overflow:'none', allowOverlap:true, x: 0, y:0 },  data:[{x:1, y:160 ,name:'StartValue' },  {x:1, y:170 , name:'EndValue' }]}  , { type:'line', linecap:'square', enableMouseTracking: false, color:'url(#highcharts-default-pattern-9)' , showInLegend:false,...