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>
<!-- <script src="http://code.highcharts.com/stock/modules/drilldown.js"></script> -->
<script src="http://anotherfineapp.com/drilldown.src.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// HACK TO TURN ON DRILLDOWN IN DATA from above web service (In reality this would be set by the web service providing the JSON data)
//we need to represent each data point in the series as a highcharts config object literal instead of an array in order to set additional attributes such as "drilldown".
//@see http://api.highcharts.com/highcharts#series
//this can cause some performance issues on larger datasets > 1000 points
//@see http://api.highcharts.com/highcharts#plotOptions.series.turboThreshold)
var dataAsObjects = [];
$.each(data, function (i, d) {
dataAsObjects.push({
//x is only required if the data does not have a regular pointInterval
x: d[0],
y: d[1],
//this is required to enable the drilldown module on this point
drilldown: true,
//Your data could also have a flag showing the current drilldown level
//you can then pass this back to the server with your $.getJSON call in the drilldown callback to determine the next level server side. There might be a more efficient way to store this info at a series level instead of a point level to save on bandwidth.
drilldownLevel: 1
});
});
console.log(dataAsObjects);
/// END HACK
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this;
console.log(e);
alert('Server will drilldown to data for series: ' + e.point.series.name +
'; on date: ' +...