Area Chart

An area chart emphasizes the degree of change over time, as well as showing the relationship of the parts to the whole. This chart displays sales per region as the Data Fields and Year as the Category Field to create a stacked area chart.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-designer.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/common/report-sample-style.css" /> <script src="/activereportsjs/demos/resource/common/init-report-sample.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> </head> <body onload="initReportSample('viewer-host', 'designer-host', 'AreaChart22.rdlx-json', 'Area Chart')" > <div id="root"> <div id="viewer-host"></div> <div id="designer-host"></div> </div> </body> </html>