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="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
CSS
.highcharts-range-selector-buttons {
display: none;
}
.highcharts-input-group {
display: none;
}
JavaScript
$(function() {
// Create the chart
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'1': {
name: 'filtered on spam',
data: [
['youtube', 234]
]
},
'66': {
name: 'filtered',
data: [
['youtube', 222]
]
}
},
drilldowns2 = {
'1': {
name: 'filtered on spam',
data: [
['facebook', 2345]
]
},
'66': {
name: 'Fruits',
data: [
['facebook', 2222]
]
}
},
drilldowns3 = {
'1': {
name: 'filtered on spam',
data: [
['stackoverflow', 2345]
]
},
'66': {
name: 'Fruits',
...