0

I have a stackblitz here - https://stackblitz.com/edit/d3-stacked-trend-bar-positioned-months-pmsptg?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

Its a stacked bar chart with a dual axis and a line chart in top.

I can't work out why but the right axis that is the line data has stopped working and only shows value from 0-1

I've been looking at this for hours and the code looks exactly like other examples of line chart I've done like - https://stackblitz.com/edit/simple-line-chart-tbjdiw?embed=1&file=src/app/app.component.ts&hideNavigation=1

Can anyone see what I've done to break this.

ttmt
  • 5,822
  • 27
  • 106
  • 158
  • You still have the fundamental error you had in your previous stachblitz regarding the transition chaining, you now have resolved it with a settimeout call (you removed that question). Add console.log statements in your `drawAxis` and your `drawLine` functions and see the order of them. Why do you draw 2 identical xAxis? – rioV8 Aug 17 '18 at 16:14
  • I'm trying to work out how to do this. I have the second xAxis because i had the second yAxis for the rightAxis. I was going to refactor and remove the second xAxis – ttmt Aug 17 '18 at 16:21

1 Answers1

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

Shashank
  • 5,570
  • 1
  • 11
  • 17
  • 1
    point 3. should have been detected by himself because it generates a lot of NaN errors in the console, not the stackblitz but from the browser. – rioV8 Aug 17 '18 at 17:39