Highcharts Sankey with sub chart

by ipoly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="container">

  <div id="main-chart"></div>
  <div id="expenses"></div>
  <div id="goals"></div>
  <div id="taxPayment"></div>
  <div id="plannedSavings"></div>

</div>

SCSS

@import "https://code.highcharts.com/css/highcharts.css";

.container {
  display: flex;
  flex-wrap: wrap;
  width: 1100px;
  margin: auto;
  
  > div{
    box-sizing: content-box;
    border: 1px solid #ccc;
    flex: 0 0 468px;
    height: 583px;
    margin: 1em ;
  }
}

.highcharts-sankey-series .highcharts-link{
  fill-opacity: 0.1;
}
.highcharts-sankey-series .highcharts-point-hover.highcharts-link{
  fill-opacity: 0.2;
}

.highcharts-sankey-series .highcharts-link {
  &.TE{
    fill: #E95B67;
  }
  &.TG{
    fill: #5EBAF3;
  }
  &.TT{
    fill: #A8A29E;
  }
  &.TP{
    fill: #5070E6;
  }
  &.TS{
    fill: #ED8D80;
  }
  &.TN{
    fill: #E1BD74;
  }
}

.highcharts-color-0 {
  fill: #56A58C;
}

.highcharts-color-1 {
  fill: #E95B67;
}

.highcharts-color-2 {
  fill: #5EBAF3;
}

.highcharts-color-3 {
  fill: #A8A29E;
}

.highcharts-color-4 {
  fill: #5070E6;
}

.highcharts-color-5 {
  fill: #ED8D80;
}

.highcharts-color-6 {
  fill: #E1BD74;
}

.highcharts-sankey-series .highcharts-data-label text {
  fill: #000;
}

TypeScript

const nodes = [{
  id: 'Salary',
  colorIndex: 0
}, {
  id: 'Self-Employment',
  colorIndex: 0
}, {
  id: 'Annuity',
  colorIndex: 0
}, {
  id: 'Pension',
  colorIndex: 0
}, {
  id: 'Social Security',
  colorIndex: 0
}, {
  id: 'Planned Distribution',
  colorIndex: 0
}, {
  id: 'Other Inflows',
  colorIndex: 0
}, {
  id: 'Total Inflows',
  colorIndex: 0
}, {
  id: 'Expenses',
  colorIndex: 1
}, {
  id: 'Living Epxense',
  colorIndex: 1
}, {
  id: 'Rent',
  colorIndex: 1
}, {
  id: 'Housing',
  colorIndex: 1
}, {
  id: 'Debt',
  colorIndex: 1
}, {
  id: 'Insurance Premium',
  colorIndex: 1
}, {
  id: 'Goals',
  colorIndex: 2
}, {
  id: 'Vacation',
  colorIndex: 2
}, {
  id: 'Charitable giving',
  colorIndex: 2
}, {
  id: 'Car',
  colorIndex: 2
}, {
  id: 'Tax Payment',
  colorIndex: 3
}, {
  id: 'Federal',
  colorIndex: 3
}, {
  id: 'State',
  colorIndex: 3
}, {
  id: 'FICA',
  colorIndex: 3
}, {
  id: 'Planned Savings',
  colorIndex: 4
}, {
  id: 'Roth IRA',
  colorIndex: 4
}, {
  id: 'Bank Saving',
  colorIndex: 4
}, {
  id: '401k',
  colorIndex: 4
}, {
  id: 'HSA',
  colorIndex: 4
}, {
  id: 'Land',
  colorIndex: 4
}, {
  id: 'Stock Plan',
  colorIndex: 4
}, {
  id: 'Spend Unsaved Cash Flow',
  offsetHorizontal: 50,
  offsetVertical: 20,
  colorIndex: 5
}, {
  id: 'Net Cash Flow Saved',
  offsetHorizontal: 50,
  offsetVertical: 20,
  colorIndex: 6
}];

const baseConfig = {
  chart: {
    styledMode: true
  },

  subtitle: {
    text: 'Styled mode'
  },

  plotOptions: {
    series: {
      dataLabels: {
        align: 'right',
      }
    }
  },

};

const expenses = [
  ['Expenses', 'Living Epxense', 23],
  ['Expenses', 'Rent', 8],
  ['Expenses', 'Housing', 66],
  ['Expenses', 'Debt', 29],
  ['Expenses', 'Insurance Premium', 17],
];

const goals = [
  ['Goals', 'Car', 2],
  ['Goals', 'Vacation', 22],
  ['Goals', 'Charitable giving', 29],
];
const taxPayment = [
  ['Tax Payment', 'Federal', 12],
  ['Tax Payment', 'State', 21],
  ['Tax Payment', 'FICA',...