JSFiddle - React, Tailwind, and code Playground
by muris2016
HTML
<script src="http://www.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="d"></div>JavaScript
chartDur = new Highcharts.Chart({
credits: false,
chart: {
backgroundColor: '#FFFFFF',
renderTo: 'd',
defaultSeriesType: 'area',
zoomType: 'x',
height: 350,
events: {
selection: function(event) {
if (event.xAxis) {
this.series[0].hide();
this.series[1].hide();
this.series[2].show();
this.series[3].show();
} else {
this.series[0].show();
this.series[1].show();
this.series[2].hide();
this.series[3].hide();
}
}
}
},
title: {
text: 'Duration',
style: {
color: '#cecece',
'font-family': 'helvetica, verdana, sans-serif'
}
},
labels: {
style: {
color: '#cecece',
'font-family': 'helvetica, verdana, sans-serif'
}
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in',
style: {
color: '#cecece',
'font-family': 'helvetica, verdana, sans-serif'
}
},
xAxis: {
type: 'datetime',
allowDecimals: false,
min: Date.UTC(2011, 5, 22, 00),
max: Date.UTC(2011, 6, 22, 23),
minPadding: 0.05,
maxPadding: 0.05,
maxZoom: 1 * 3600000,
// 1 day
title: {
text: null,
style: {
color: '#cecece',
'font-family': 'helvetica, verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Duration (minutes)',
style: {
color: '#cecece',
'font-family': 'helvetica,...