JSFiddle - React, Tailwind, and code Playground

by user93

HTML

<script>
 if (!String.prototype.includes) {
     String.prototype.includes = function() {
         'use strict';
         return String.prototype.indexOf.apply(this, arguments) !== -1;
     };
 }

</script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>


<div id="container" style="width:100%;height:400px;">
</div>

JavaScript

Highcharts.setOptions({
                                      lang: {
                                          drillUpText: 'Back'
                                          
                                      }
                                  });
                                  var chart1 = new Highcharts.Chart({
                                      chart: {
              renderTo: 'container',
              type: 'column',
              events: {
                drilldown: function(e) {
                  var chart = this;
                    drilldowns = chart.userOptions.drilldown.series;
                    series = [];
                  e.preventDefault();
                  Highcharts.each(drilldowns, function(p, i) {
                    if (p.id.includes(e.point.drilldown)) {
                      chart.addSingleSeriesAsDrilldown(e.point, p);
                    }
                  });
                  chart.applyDrilldown();
                }
              }
          },
          responsive: {
              rules: [{
                      condition: {
                          maxWidth: 500,
                          
                      },
                      chartOptions: {
                      
                          yAxis: {
                              labels: {
                                  align: 'left',
                                  x: 0,
                                  y: -5
                              },
                              title: {
                                  text: null
                              }
                          },
                          subtitle: {
                              text: null
                          },
                         credits: {
                              enabled: false
                          }
                      }
                  }]
          },
          title: {
              text: 'Overall Resolved,Breach count'
          },
          xAxis:...