JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/master/js/highstock.src.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
JavaScript
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
'click': function(event) {
var x = event.xAxis[0].value,
y = event.yAxis[0].value,
series = chart.get('series2');
series.addPoint([x, Math.round(y)]);
}
}
},
tooltip: {
shared: false
},
series: [{
name: 'series1',
data: data,
point: {
events: {
click: function(event) {
var x = this.x,
y = this.y,
series = chart.get('series2');
series.addPoint([x, Math.round(y)]);
}
}
},
legend: {
enabled : true
},
tooltip: {
snap: 1 / 1
}},
{
id: 'series2',
type: 'scatter',
data: [],
marker: {
radius: 6,
symbol: 'circle'
},
point: {
events: {
click: function(event) {
this.remove();
}
}
},
tooltip: {
snap: 50 / 25
},
zIndex: 10
}]
}, function(chart){
var series = chart.series[1].group.element,
svg =...