JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<input id="input" value=65 />
<button id="button" type="button">Get X VALUE</button>
JavaScript
$(function () {
lineWidth = 1,
lineColor = 'red';
var ttt=$('#container').highcharts({
plotOptions: {
series: {
allowPointSelect: false,
marker: {
states: {
select: {
enabled: true,
fillColor: 'red',
color: 'red'
}
},
}
}
},
title: {
text: 'Logarithmic axis demo'
},
yAxis: {
title: {
text: 'H (Hauteur Man. totale)'
}
} ,
xAxis: {
title: {
text: 'Q<br>Debit'
}
} ,
tooltip: {
headerFormat: '',
pointFormat: 'Q = {point.x} m³/h<br>H = {point.y}',
crosshairs: [true,true]
},
series: [{
type: 'spline',
name : '',
data: [[1.50,66.00], [1.80,64.00], [2.10,62.00], [2.40,58.00], [2.70,56.00], [3.00,52.00], [3.60,43.00], [4.20,28.00]],
lineWidth: 4,
enabledCrosshairs: true,
marker : {
enabled : true,
radius : 2
},
tooltip: {
valueDecimals: 2
}
}]
});
//BUTTON CLICK
$('#button').click(function(){
y1=$('#input').val();
var points = $('#container').highcharts().series[0].points;
for (var i = 0; i < points.length; i++) {
//alert(points[i].y);
if (points[i].y == y1){
xValue = points[i].x;
alert(xValue);
break;
}
}
//x=ttt.xAxis[0].toPixels(xValue);
});
});