score:1

I feel it's a good practice to append the <g> for the axes first and then once the domains are set, you call them. Relevant changes made:

  1. Re-ordered:

    this.drawAxis();
    this.createStack(this.data);
    
  2. Calling axes once the domains are set:

    this.y0.domain([0, +d3.max(this.stackedSeries, function (d: any) {
       return d3.max(d, (d: any) => {
          return d[1]
       })
    })]);
    this.chart.select('g.y0-axis').call(d3.axisLeft(this.y0));
    
  3. Removing "four" from the keys as it doesn't exist in the data:

      .keys(['one', 'two', 'three'])
    
  4. Included the stroke-dasharray transition to the line from your previous post

    var totalLength = thisLine.node().getTotalLength();
    
    thisLine.attr("stroke-dasharray", totalLength + " " + totalLength)
       .attr("stroke-dashoffset", totalLength);
    
    thisLine.transition()
      .duration(1000)
      .attr("stroke-dashoffset", 0);  
    

Here's a fork of your code with the above changes: https://stackblitz.com/edit/d3-stacked-trend-bar-positioned-months-vtb2zr?file=src/app/bar-chart.ts


Related Query

More Query from same tag