JSFiddle - React, Tailwind, and code Playground
by core972
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
JavaScript
//By altering the values any line should be drawn above the graph
//using the given coordinates
lineStartXposition = 120,
lineStartYposition = 50,
lineEndXposition = 120,
lineEndYposition = 70;
$(function () {
$('#container').highcharts({
title: {
text: 'REMISSION'
},
xAxis: {
min: 0,
max: 35,
tickInterval: 5,
title: {text: "Time"},
},
yAxis: {
min: 0,
max: 100,
tickInterval: 20,
title: {text: "Survival Probability(%)"}
},
series: [{
data: [
[1, 100], [6, 83], [7, 80], [9, 75], [12, 70], [15, 60], [20, 50], [28, 45]
],
step: 'left',
name: 'Group 1'
},
{
data: [
[1, 100], [5, 75], [6, 70], [8, 66], [10, 61], [13, 50], [18, 40], [25, 32]
],
step: 'left',
name: 'Group 2'
}]
}, function (chart,lineStartXposition,lineStartYposition,lineEndXposition,lineEndYposition) {
//var startPoint = chart.series[0].data[4],
console.log(lineStartXposition + ' '+ lineStartYposition + ' '+ lineEndXposition + ' '+lineEndYposition);
var lineStartXposition = lineStartXposition + chart.plotLeft + 10,
lineStartYposition = lineStartYposition + chart.plotTop+10,
lineEndXposition = lineEndXposition + chart.plotLeft + 10,
...