JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<div id="container"></div>
JavaScript
var dummyDates,
mcData,
masterChart,
detailChart;
jQuery(document).ready(function() {
var $container = jQuery('#container').css('position', 'relative');
var $detailContainer = jQuery('<div id="detail-container">').appendTo($container);
var $masterContainer = jQuery('<div id="master-container">').css({
position: 'absolute',
top: 300,
height: 80,
width: '100%'
}).appendTo($container);
prepareDummyDates();
prepareMCData();
createMasterChart();
masterChart.xAxis[0].addPlotBand({
id: 'mask-before',
from: 0,
to: dummyDates.length - 1,
color: '#FCFFC5'
});
});
function createMasterChart() {
masterChart = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotShadow: false,
renderTo: 'master-container',
reflow: false,
borderWidth: 0,
backgroundColor: null,
marginLeft: 50,
marginRight: 20,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function(event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
...