Stacked area chart data with NaN

Question

I have a demo here https://stackblitz.com/edit/stacked-area-basic?file=src/app/bar-chart.ts

I'm trying to create a stacked area chart. This is my first attempt at this type of chart and I'm using online examples to help.

Nothing is actually displaying, the paths are getting created but but the data in the paths are all NaN.

I know this is a vague question but can anyome see why this isn't working.

const areaGenerator = d3.area()
  .x((d) => this.x(d.x))
  .y0(this.height)
  .y1((d) => this.y(d.y));

const areaGroup = this.chart.append('g')
  .classed('area-group', true)

areaGroup.selectAll('path')
  .data(data)
  .enter()
  .append('path')
  .style('fill', (d, i) => this.colors[i])
  .attr('d', areaGenerator)

I don't see you initializing your data, except for @Input() data: FLChart[]; and that's empty. If you can show me where you actually do that I might be able to help. — Magelan
I think I'm initializing the data here this.createStack(this.data); @Input() data: FLChart[]; isn't empty — ttmt

Gerardo Furtado Gerardo Furtado · Accepted Answer · 2019-06-14T02:52:45

Your area generator is wrong. It should be:

const areaGenerator = d3.area()
    .x((d) => this.x(d.data.date))
    .y0((d) => this.y(d[0]))
    .y1((d) => this.y(d[1]));

Here is the updated code: https://stackblitz.com/edit/stacked-area-basic-lz7kod?file=src/app/bar-chart.ts

Stacked area chart data with NaN

1 Answers