Highcharts Trellis chart

HTML

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

<h1>Highcharts Trellis chart emulation</h2>

<div class='chart-wrapper'><div class='chart-inner'></div></div>
<div class='chart-wrapper'><div class='chart-inner'></div></div>
<div class='chart-wrapper'><div class='chart-inner'></div></div>
<div class='chart-wrapper'><div class='chart-inner'></div></div><div class='chart-wrapper'><div class='chart-inner'></div></div>
<div class='chart-wrapper'><div class='chart-inner'></div></div>
<div class='chart-wrapper'><div class='chart-inner'></div></div>
<div class='chart-wrapper'><div class='chart-inner'></div></div>

CSS

.chart-wrapper {
        display: inline-block;
        height: 25.000000%;
        margin: -5px 0px 0px 0px;
        position: relative;
        width: 25.000000%;
    }
    
    .chart-inner {
        height: 100%;
        position: relative;
        width: 100%;
    }

JavaScript

var charts = [],
  $containers = $('.chart-inner'),
  datasets = [{
      name: "CMA's [CMA]",
      showInLegend: true,
      data: [{
        name: "SouthEast Area",
        y: 24.700000,
        n1stByItem: 0,
      }, {
        name: "SouthWest Area",
        y: 29.400000,
        n1stByItem: 3,
      }, {
        name: "NorthWest Area",
        y: 26.500000,
        n1stByItem: 4,
      }, {
        name: "East Area",
        y: 15.500000,
        n1stByItem: 2,
      }, {
        name: "Near West Area",
        y: 0.001000,
        n1stByItem: 1,
      }, {
        name: "DFLT_96",
        y: 3.800000,
        n1stByItem: 7,
      }, {
        name: "DFLT_99",
        y: 0.001000,
        n1stByItem: 5,
      }, {
        name: "NorthEast Area",
        y: 0.001000,
        n1stByItem: 6,
      }, {
        name: "DFLT_",
        y: 0.001000,
        n1stByItem: 8,
      }],
      visible: true,
      bNegData: false,
      title: {
        align: 'center',
        text: "<b>CMA's [CMA]</b>",
        verticalAlign: 'top',
        y: -30
      },
      //center: ['10%', '25%']
    },
    {
      name: "Depreciation [Depr]",
      showInLegend: false,
      data: [{
        name: "SouthEast Area",
        y: 20.100000,
        n1stByItem: 0,
      }, {
        name: "SouthWest Area",
        y: 10.000000,
        n1stByItem: 3,
      }, {
        name: "NorthWest Area",
        y: 7.900000,
        n1stByItem: 4,
      }, {
        name: "East Area",
        y: 6.300000,
        n1stByItem: 2,
      }, {
        name: "Near West Area",
        y: 55.100000,
        n1stByItem: 1,
      }, {
        name: "DFLT_96",
        y: 0.100000,
        n1stByItem: 7,
      }, {
        name: "DFLT_99",
        y: 0.001000,
        n1stByItem: 5,
      }, {
        name: "NorthEast Area",
        y: 0.200000,
        n1stByItem: 6,
      }, {
        name: "DFLT_",
        y: 0.200000,
        n1stByItem: 8,
      }],
      visible: true,
      bNegData: false,
     ...