JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

JavaScript

var data = [...Array(20)].map(() => [...Array(3)].map(() => Math.round(Math.random() * 5)));
var categories = ['First', 'Second', 'Third', 'Forth', 'Fifth'];

// Give the points a 3D feel by adding a radial gradient
Highcharts.getOptions().colors = Highcharts.getOptions().colors.map(function(color) {
  return {
    radialGradient: {
      cx: 0.4,
      cy: 0.3,
      r: 0.5
    },
    stops: [
      [0, color],
      [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
    ]
  };
});

// Set up the chart
var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    margin: 100,
    type: 'scatter',
    options3d: {
      enabled: true,
      alpha: 10,
      beta: 30,
      depth: 250,
      viewDistance: 5,
      fitToPlot: false,
      frame: {
        bottom: {
          size: 1,
          color: 'rgba(0,0,0,0.02)'
        },
        back: {
          size: 1,
          color: 'rgba(0,0,0,0.04)'
        },
        side: {
          size: 1,
          color: 'rgba(0,0,0,0.06)'
        }
      }
    }
  },
  title: {
    text: 'Draggable box'
  },
  tooltip: {
    formatter: function() {
      const chart = this.point.series.chart,
        catsX = chart.xAxis[0].categories,
        catsY = chart.yAxis[0].categories,
        catsZ = chart.zAxis[0].options.categories;
      return `X: ${catsX[this.point.x]}<br/>
      	Y: ${catsY[this.point.y]}<br/>
      	Z: ${catsZ[this.point.z]}`;
    }
  },
  subtitle: {
    text: 'Click and drag the plot area to rotate in space'
  },
  plotOptions: {
    scatter: {
      width: 5,
      height: 5,
      depth: 5
    }
  },
  yAxis: {
    min: 0,
    max: 4,
    categories: categories.map(title => title + ' Y')
  },
  xAxis: {
    min: 0,
    max: 4,
    categories: categories.map(title => title + ' X')
  },
  zAxis: {
    min: 0,
    max: 4,
    categories: categories.map(title => title + ' Z')
  },
  legend: {
    enabled: false
  },
  series: [{
    name: 'Reading',
    colorByPoint: true,
    data: data
 ...