JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
JavaScript
var new_data = [
[1353498875000, 20],
[1353499295000, 11.160532142857],
[1353500135000, 10.883982142857],
[1353500975500, 10.702821428571]];
var default_serie = [{
name : "",
data : [[1353498875000,0],[1353500975500,0]],
showInLegend:false,
xAxis: 0,
tooltip : {
enabled:false
}
}];
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
},
chart : {
zoomType : 'x',
alignTicks : false
},
xAxis : {
ordinal : false
},
yAxis: [{
title: {
text: 'Test',
}
}],
credits : {
enabled : false
},
rangeSelector : {
inputEnabled : false
},
navigator : {
adaptToUpdatedData : false
},
legend : {
enabled : true,
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : -10,
y : 100,
borderWidth : 0
},
plotOptions : {
series : {
dataGrouping : {
enabled : true,
groupPixelWidth : 20,
approximation : 'average'
}
}
}
});
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
xAxis : {
ordinal : false
},
exporting :
{
enabled: true
},
series : default_serie
});
window.chart.addSeries({
name : "",
xAxis: 0,
yAxis: 1,
type: "line",
enableMouseTracking: false,
data : new_data,
showInLegend:false
});
});