title: stacked bar plot/chart in angular using D3.js
body: <p>I have put some dummy data into a <code>csv</code> file in my Angular project:</p>
  <pre><code>group,Nitrogen,normal,stress
  banana,12,1,13
  poacee,6,6,33
  sorgho,11,28,12
  triticum,19,6,1
  </code></pre>
  <p>I created a <code>stacked-bar</code> component and put the following in its <code>html</code> script:</p>
  <pre><code>&lt;figure id=&quot;stacked-bar&quot;&gt;&lt;/figure&gt;
  </code></pre>
  <p>I then wrote this typescript file to display a stacked bar:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import * as d3 from 'd3';
  
  @Component({
    selector: 'app-stacked-bar',
    templateUrl: './stacked-bar.component.html',
    styleUrls: ['./stacked-bar.component.css']
  })
  export class StackedBarComponent implements OnInit {
  
    svg: any;
  
    margin = 50;
    width = 750 - (this.margin * 2);
    height = 400 - (this.margin * 2);
  
    ngOnInit(): void {
      this.createSvg();
      d3.csv(&quot;/assets/fruits.csv&quot;).then(data =&gt; this.drawBars(data));
    }
  
    createSvg(): void {
      this.svg = d3.select(&quot;figure#stacked-bar&quot;)
      .append(&quot;svg&quot;)
      .attr(&quot;width&quot;, this.width + (this.margin * 3))
      .attr(&quot;height&quot;, this.height + (this.margin * 3))
      .append(&quot;g&quot;)
      .attr(&quot;transform&quot;, &quot;translate(&quot; + this.margin + &quot;,&quot; + this.margin + &quot;)&quot;);
    }
  
    drawBars(data): void {
      const subgroups = data.columns.slice(1)
      const groups = data.map(d =&gt; (d.group))
  
      // Create the X-axis band scale.
      const x = d3.scaleBand()
      .range([0, this.width])
      .domain(data.map(d =&gt; d.groups))
      .padding(0.2);
  
      // Draw the X-axis on the DOM.
      this.svg.append(&quot;g&quot;)
      .attr(&quot;transform&quot;, &quot;translate(0,&quot; + this.height + &quot;)&quot;)
      .call(d3.axisBottom(x).tickSizeOuter(0))
      
      // Create the Y-axis band scale.
      const y = d3.scaleLinear()
      .domain([5.75, 9])
      .range([this.height, 0]);
  
      // Draw the Y-axis on the DOM.
      this.svg.append(&quot;g&quot;)
      .call(d3.axisLeft(y));
  
      // color palette - one color per subgroup
      const color = d3.scaleOrdinal()
      .domain(subgroups)
      .range(['#e41a1c','#377eb8','#4daf4a'])
  
      // stack the data per subgroup
      const stackedData = d3.stack()
      .keys(subgroups)
      (data)
  
      // Create and fill the bars.
      this.svg.append(&quot;g&quot;)
      .selectAll(&quot;g&quot;)
      .data(stackedData)
      .join(&quot;g&quot;)
      .attr(&quot;fill&quot;, d =&gt; color(d.key))
      .selectAll(&quot;rect&quot;)    
      .data(data)
      .join(&quot;rect&quot;)
      .attr(&quot;x&quot;, d =&gt; x(d.data.group))
      .attr(&quot;y&quot;, d =&gt; y(d[1]))
      .attr(&quot;height&quot;, d =&gt; y(d[0]) - y(d[1]))
      .attr(&quot;width&quot;,x.bandwidth())
    }
  }
  </code></pre>
  <p>But all I get is the following empty plot:</p>
  <p><a href="https://i.stack.imgur.com/Yes5k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yes5k.png" alt="enter image description here" /></a></p>
  <p><strong>What am I doing wrong? Could someone please help me find my mistake?</strong></p>
  <p>Thanks</p>