JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<div id="container" style="=width: 210px; height: 400px; margin: 0 auto"></div>
<div id="container1" style="=width: 210px; height: 400px; margin: 0 auto"></div>

JavaScript

(async () => {
  const {
    default: Highcharts
  } =
  await import('https://code.highcharts.com/es-modules/masters/highcharts.src.js');
  await import('https://code.highcharts.com/es-modules/masters/highcharts-more.src.js');
  await import('https://code.highcharts.com/es-modules/masters/modules/drilldown.src.js');

  Highcharts.chart('container', {
    chart: {
      type: 'columnrange',
      inverted: false
    },
    title: {
      text: ''
    },
    subtitle: {
      text: '7'
    },
    xAxis: {
      type: 'category',
      labels: {
        rotation: 0,
        y: -110,
        style: {
          color: '#111',
          fontSize: '.85rem',
        }
      }
    },
    yAxis: {
      plotLines: [{
        color: '#ffff',
        width: 30,
        value: 0,
        zIndex: 5
      }]
    },
    plotOptions: {
      columnrange: {
        dataLabels: {
          enabled: true,
          format: '{y}'
        }
      }
    },
    legend: {
      enabled: true,
      align: 'left'
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },



    series: [{
      data: [{
        low: -34,
        high: 39,
        drilldown: 'marketrisk1'
      }, {
        low: -36,
        high: 36,
        drilldown: 'creditqualityrisk1'
      }, {
        low: -33,
        high: 40,
        drilldown: 'liquidityrisk1'
      }, {
        low: -15,
        high: 57,
        drilldown: 'inflationrisk1'
      }]
    }, {
      data: [{
        low: -32,
        high: 40,
        drilldown: 'marketrisk2'
      }, {
        low: -34,
        high: 30,
        drilldown: 'creditqualityrisk2'
      }, {
        low: -26,
        high: 49,
        drilldown: 'liquidityrisk2'
      }, {
        low: -12,
        high: 61,
        drilldown: 'inflationrisk2'
      }]
    }, {
      name: 'Public pension',
      data: [{
        low: -41,
        high: 28,
        drilldown: 'marketrisk3'
      }, {
        low: -30,
        high: 35,
       ...