# D3 stacked area chart with data from ajax and with Legends

**URL:** <https://talk.observablehq.com/t/d3-stacked-area-chart-with-data-from-ajax-and-with-legends/5665>\
**Category:** Help\
**Created:** [October 10, 2021, 4:51am UTC](https://talk.observablehq.com/t/d3-stacked-area-chart-with-data-from-ajax-and-with-legends/5665 "2021-10-10T04:51:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ayush](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@Ayush](https://talk.observablehq.com/u/Ayush)\
**Post date:** [October 10, 2021, 4:51am UTC](https://talk.observablehq.com/t/d3-stacked-area-chart-with-data-from-ajax-and-with-legends/5665/1 "2021-10-10T04:51:43Z")

</div>

I’m trying to build D3 stacked area chart with x-axis (Fixed Jan to Dec) as Month names but there are some errors as MNaN and also on D3 official site there is data loading for chart from a file (.csv. .json, .tsv, etc) but I want to load data from array.  
I am referring this code for generating Stacked area chart : [Stacked area chart template for d3.js](https://www.d3-graph-gallery.com/graph/stackedarea_template.html)  
Can anyone help me with the code, below is the data required

![D](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/29b422f11650856fe4c4986f4d9390cd47c24fba.jpeg)

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [October 10, 2021, 7:15am UTC](https://talk.observablehq.com/t/d3-stacked-area-chart-with-data-from-ajax-and-with-legends/5665/2 "2021-10-10T07:15:21Z")

</div>

Have you a link to your notebook?

This [might help](https://observablehq.com/@ykumanekoy/make-a-table-by-d3-js), it uses arrays.

---

<div class="post-metadata">

**Author:** ![Ayush](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@Ayush](https://talk.observablehq.com/u/Ayush)\
**Post date:** [October 11, 2021, 8:32am UTC](https://talk.observablehq.com/t/d3-stacked-area-chart-with-data-from-ajax-and-with-legends/5665/3 "2021-10-11T08:32:34Z")

</div>

Hello @hellonearthis, I don’t have any link to notebook but I have structure of my array

```auto
var data = [{ "Month": "Jan 2021", "Category": "A", "Value": "37" },
        { "Month": "Feb 2021", "Category": "A", "Value": "73" },
        { "Month": "Mar 2021", "Category": "A", "Value": "110" },
        { "Month": "Apr 2021", "Category": "A", "Value": "147" },
        { "Month": "May 2021", "Category": "A", "Value": "183" },
        { "Month": "Jun 2021", "Category": "A", "Value": "218" },
        { "Month": "Jul 2021", "Category": "A", "Value": "253" },
        { "Month": "Aug 2021", "Category": "A", "Value": "287" },
        { "Month": "Sep 2021", "Category": "A", "Value": "317" },
        { "Month": "Oct 2021", "Category": "A", "Value": "342" },
        { "Month": "Nov 2021", "Category": "A", "Value": "384" },
        { "Month": "Dec 2021", "Category": "A", "Value": "420" },
        { "Month": "Jan 2021", "Category": "B", "Value": "96" },
        { "Month": "Feb 2021", "Category": "B", "Value": "192" },
        { "Month": "Mar 2021", "Category": "B", "Value": "288" },
        { "Month": "Apr 2021", "Category": "B", "Value": "387" },
        { "Month": "May 2021", "Category": "B", "Value": "493" },
        { "Month": "Jun 2021", "Category": "B", "Value": "657" },
        { "Month": "Jul 2021", "Category": "B", "Value": "874" },
        { "Month": "Aug 2021", "Category": "B", "Value": "1107" },
        { "Month": "Sep 2021", "Category": "B", "Value": "1363" },
        { "Month": "Oct 2021", "Category": "B", "Value": "1524" },
        { "Month": "Nov 2021", "Category": "B", "Value": "1749" },
        { "Month": "Dec 2021", "Category": "B", "Value": "1998" } ]

```

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [October 11, 2021, 11:07am UTC](https://talk.observablehq.com/t/d3-stacked-area-chart-with-data-from-ajax-and-with-legends/5665/4 "2021-10-11T11:07:29Z")

</div>

This should help: [Not a D3 stacked area chart with data from ajax and with Legends / Brett Cooper / Observable](https://observablehq.com/d/f369ec0dfe5d41c6)

process the raw data you provided, converting the data and making the Value a number type.  
`data = RAWdata.map( d=>{ return {Month:parseData(d.Month),Category:d.Category,Value:+d.Value} })`

Convert the date string into data object  
`parseData = d3.utcParse('%b %Y')`