d3 Stacked bar chart with tooltips

HTML

<div class="slds-button-group" role="group">
      <button class="slds-button slds-button_neutral" id="yearly">Year</button>
      <button class="slds-button slds-button_neutral" id="quarterly">Quarter</button>
      <button class="slds-button slds-button_neutral" id="monthly">Month</button>      
    </div>
    
    <div id="dynamic-bar-chart"></div>

CSS

#dynamic-bar-chart {
  margin: auto;
  background-color: whitesmoke;
}

svg {
    font: 13px sans-serif;
    shape-rendering: crispEdges;
    color: white;
  }

 
  path.domain {
    stroke: none;
  }
 
  .y .tick line {
    stroke: black;
  }
  
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

path {
  stroke: yellow;
}

line {
  stroke: gray;
}

line#limit {
  stroke: red;
  stroke-width: 3;
  stroke-dasharray: 2 6;
}

text.divergence {
  font-size: 12px;
  fill: #2F4A6D;
}

JavaScript

var yearData = [
            {year: "2020", sumOfRoth: 1413.44, sumOfPreTax: 1978.83, sumOfSafeHerborNonElective: 1130.78}
           
        ];
        
        var monthData = [
            {month: 'May', sumOfRoth: 20, sumOfPreTax: 70, sumOfSafeHerborNonElective: 2},
            {month: 'Jun', sumOfRoth: 15, sumOfPreTax: 55, sumOfSafeHerborNonElective: 12},
            {month: 'Jul', sumOfRoth: 28, sumOfPreTax: 70, sumOfSafeHerborNonElective: 2},
            {month: 'Aug', sumOfRoth: 10, sumOfPreTax: 55, sumOfSafeHerborNonElective: 12}         
        ];
        
        var quarterData = [
            {quarter: '2019-Q1', sumOfRoth: 10, sumOfPreTax: 40, sumOfSafeHerborNonElective: 12},
            {quarter: '2019-Q2', sumOfRoth: 20, sumOfPreTax: 70, sumOfSafeHerborNonElective: 2},
            {quarter: '2019-Q3', sumOfRoth: 45, sumOfPreTax: 55, sumOfSafeHerborNonElective: 12},
            {quarter: '2019-Q4', sumOfRoth: 18, sumOfPreTax: 70, sumOfSafeHerborNonElective: 2}
        ];

var xData = ["sumOfRoth", "sumOfPreTax", "sumOfSafeHerborNonElective"];


var margin = {top: 20, right: 150, bottom: 45, left: 50};
        
        var width = 1020 - margin.left - margin.right,
            height = 550 - margin.top - margin.bottom;
                       
        // Set x, y and colors
        
        var x = d3.scale.ordinal()
        .rangeRoundBands([20, width-10], 0.15);        
                
        var y = d3.scale.linear()
         .rangeRound([height, 0]);

         var colorScheme = ["#003f5c","#2f4b7c","#665191","#a05195","#d45087","#f95d6a","#ff7c43","#ffa600", "#ffe680", "#339933", "#9fdf9f"];
         var colors = [];
         
         for(i=0; i<xData.length; i++)
         {
             colors.push(colorScheme[i]);
         }
         
             
        const yScale = d3.scale.linear()
        .range([height, 0])
        .domain([0, 100]);
        
        // var colors = ["b33040", "#d25c4d", "#d9d574"];
         
        var xAxis =...