JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://umbraco.hjhansen.dk/scripts/highstock.js"></script>
<div class="graph-wrapper">
<div class="graph" id="graph">
</div>
</div>
<div id="data" ></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 : 'graph',
events: {
load: function(event) {
}
}
},
xAxis: {
minPadding: 0.07,
maxPadding: 0.001,
startOnTick: false
},
rangeSelector: {
enabled: false
},
tooltip: {
valueDecimals: 2,
},
title : {
text : 'AAPL Stock Price'
},
navigator : {
enabled : true
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
},{
name : 'BBBB',
data : data,
tooltip: {
valueDecimals: 2
}
}]
},function(chart){
// Last point in graph...
showLastPointTooltip(chart);
});
});
function showLastPointTooltip(objHighStockchart){
// show tooltip for last point
var points=[];
if(objHighStockchart)
{
for(var i=0;i<objHighStockchart.series.length;i++)
points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length-1]);
objHighStockchart.tooltip.refresh(points);
}
}
});