CODEWITHSUNDEEP
javascriptamchartsamcharts4
Bogaso
Bogaso

Reputation: 3308

Stacked Area Chart on time series data

Let say I have below time series data

Date    A   B
2013    100.5605895 200.2631216
2014    100.9491154 200.7340505
2015    100.9897489 200.6443121
2016    100.4639869 200.3362392
2017    100.9213508 200.9948514

Now I want to create a stacked time series plot with A on the top of B as in https://krispo.github.io/angular-nvd3/0.x/#/stackedAreaChart

Is there any way to achieve the same with amCharts?

Upvotes: 1

Views: 126

Answers (1)

notacouch
notacouch

Reputation: 3655

Here's a fork of our 100% stacked area chart demo that uses the data you provided (you can use a category axis in this case instead of date axis, unless you really need dates, note I changed the years to strings below):

https://codepen.io/team/amcharts/pen/c5e3b7104d4bf0b1a417f7d6c52c95b7

If you set up a series for B first, then A will appear above B.

chart.data = [
  {"year": "2013",    "A": 100.5605895, "B": 200.2631216, },
  {"year": "2014",    "A": 100.9491154, "B": 200.7340505, },
  {"year": "2015",    "A": 100.9897489, "B": 200.6443121, },
  {"year": "2016",    "A": 100.4639869, "B": 200.3362392, },
  {"year": "2017",    "A": 100.9213508, "B": 200.9948514, },
];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";

var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Value";

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "B";
series.dataFields.categoryX = "year";
series.name = "B";

var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "A";
series2.dataFields.categoryX = "year";
series2.name = "A";

Hope this helps.

Upvotes: 1

Related Questions