Request: Stacked Area Charts

[fordaaronj]

Any plans to support a Stacked Area chart (screenshot attached)?

[gitbrent]

Hi @fordaaronj,

Patches are always welcome.

I'd encourage you to look at the code and determine if you can add this functionality via a pull request.

[kumaarraja]

Hi @fordaaronj ,

I believe this feature already supported. Try below node based snippet (this piece is from demo code).

PptxGenJS = require("pptxgenjs"); var pptx = new PptxGenJS(); pptx.setLayout("LAYOUT_WIDE"); var slide = pptx.addNewSlide(); var gOptsTabOpts = { x: 0.4, y: 0.13, w: 12.5, colW: [9, 3.5] }; var gOptsTextL = { color: "9F9F9F", margin: 3, border: [0, 0, { pt: "1", color: "CFCFCF" }, 0] }; var gOptsTextR = { text: "PptxGenJS", options: gOptsOptsR }; var gOptsOptsR = { color: "9F9F9F", margin: 3, border: [0, 0, { pt: "1", color: "CFCFCF" }, 0], align: "right" }; var MONS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; slide.addTable([[{ text: "Chart Examples: Area Chart", options: gOptsTextL }, gOptsTextR]], gOptsTabOpts); var arrDataTimeline2ser = [ { name: "Actual Sales", labels: MONS, values: [1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789, 10123, 15121] }, { name: "Proj Sales", labels: MONS, values: [1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789, 11123, 12121] } ]; // TOP-LEFT var optsChartLine1 = { x: 0.5, y: 0.6, w: "45%", h: 3, catAxisOrientation: "maxMin", valAxisOrientation: "maxMin" }; slide.addChart(pptx.charts.AREA, arrDataTimeline2ser, optsChartLine1); // TOP-RIGHT var optsChartLine2 = { x: 7, y: 0.6, w: "45%", h: 3, chartColors: ["0088CC", "99FFCC"], chartColorsOpacity: 25, dataBorder: { pt: 2, color: "FFFFFF" }, fill: "D1E1F1" }; slide.addChart(pptx.charts.AREA, arrDataTimeline2ser, optsChartLine2); // BOTTOM-LEFT var optsChartLine3 = { x: 0.5, y: 4.0, w: "45%", h: 3, chartColors: ["0088CC", "99FFCC"], chartColorsOpacity: 50, valAxisLabelFormatCode: "#,K" }; slide.addChart(pptx.charts.AREA, arrDataTimeline2ser, optsChartLine3); // BOTTOM-RIGHT var optsChartLine4 = { x: 7, y: 4.0, w: "45%", h: 3, chartColors: ["CC8833", "CCFF69"], chartColorsOpacity: 75 }; slide.addChart(pptx.charts.AREA, arrDataTimeline2ser, optsChartLine4); pptx.save("pptwithstack");

Hope this helps!

[fordaaronj]

Thanks @kumaarraja . I tested the code but that produces 4 standard area charts (the selected option in the row in the pic attached) whereas I am looking for stacked area charts (the 2nd option in that row).

I may have time to take a look at the code and try to add.

[gitbrent]

Thanks @fordaaronj

Support for stacked area charts is checked in.