{"id":10634,"date":"2020-06-10T00:00:34","date_gmt":"2020-06-10T00:00:34","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=10634"},"modified":"2022-08-13T10:59:48","modified_gmt":"2022-08-13T10:59:48","slug":"stacked-area-chart-javascript-tutorial","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/06\/10\/stacked-area-chart-javascript-tutorial\/","title":{"rendered":"How to Create Stacked Area Chart with JavaScript"},"content":{"rendered":"

\"JSStacked area charts<\/a>,\u00a0a variation of classic area charts<\/a>, are quite a popular form of data visualization.\u00a0They\u00a0work\u00a0great to\u00a0graphically represent how\u00a0multiple\u00a0variables\u00a0and their totals are changing over time<\/a>. In this tutorial, I will show you how to easily create\u00a0an interactive JavaScript stacked area chart\u00a0which will\u00a0look compelling\u00a0in any HTML5 project, web site or app.<\/p>\n

To demonstrate this way, which is\u00a0quite simple to master even if you only have basic HTML\u00a0coding skills,\u00a0I am going to visualize official data about the outbreak of the COVID-19<\/a> pandemic in Italy. The visualizations built along the tutorial will\u00a0display how the\u00a0numbers of cases, recoveries, and deaths have been\u00a0changing \u2014 from\u00a0January 31, when the first two cases were confirmed, to yesterday, June 9, when the total number of coronavirus cases\u00a0in Italy reached\u00a0235,561.<\/p>\n

<\/p>\n

4\u00a0Steps to Build JS Stacked Area Charts<\/h2>\n

The\u00a0development of any JavaScript graph, including a stacked area chart, can be broken down into the following four fundamental steps:<\/p>\n

    \n
  1. Create\u00a0an HTML page for\u00a0the chart.<\/li>\n
  2. Add necessary JavaScript files.<\/li>\n
  3. Set the\u00a0data.<\/li>\n
  4. Write the JS code for the chart.<\/li>\n<\/ol>\n

    Let’s start with making a basic, value-based JS stacked area chart. Then I will show you how to customize it to suit your own needs and tasks. The final data visualization example will be the following JavaScript percent stacked area chart:<\/p>\n

    \"Animated<\/p>\n

    Now, let\u2019s get down to\u00a0business!<\/p>\n

    Step 1: Create an HTML page<\/h3>\n

    Begin\u00a0with creating a basic HTML page. This page should contain the following:<\/p>\n

      \n
    1. A relevant title.<\/li>\n
    2. An HTML block element (for example, <div><\/code>) which will\u00a0store your chart.<\/li>\n
    3. An id attribute for the <div><\/code> (for example, \u201ccontainer\u201d).<\/li>\n<\/ol>\n

      Note that you can also add CSS rules in the <style><\/code> block to modify the space that your stacked area chart will occupy. If you want\u00a0the graphic to fill the whole page, use 100% for both the width<\/code> and height<\/code> parameters.<\/p>\n

      The HTML page should look like this:<\/p>\n

      <!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n  <title>Stacked Area Chart<\/title>\r\n  <style>\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div id=\"container\"><\/div>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
      Step 2: Add necessary JavaScript files<\/h3>\n
      Now, you should reference all the necessary JS files in the <head><\/code> section.<\/p>\n
      The stacked area chart that I will show you in this tutorial is based on AnyChart<\/a>‘s JS library. Generally, JavaScript libraries enable you to produce the desired output more quickly and easily. AnyChart is lightweight and flexible, so you can be as creative as you want and come up with a fully functional and responsive chart to use on your website or app.<\/p>\n
      For this\u00a0charting tutorial, I will include the corresponding CDN<\/a> links. If you prefer, you can download the scripts locally.<\/p>\n
      The AnyChart JavaScript library features a modular system which is helpful in optimizing the size of the JS code running on a web page.\u00a0To make\u00a0a stacked area chart using it, add\u00a0two\u00a0modules:<\/a>\u00a0Core and Basic Cartesian. The first one is the basic AnyChart module required to use any other module.\u00a0The second\u00a0module\u00a0powers all Cartesian charts.<\/p>\n
      Here is the HTML code for what we’ve got so far:<\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n  <title>\r\nStacked Area Chart<\/title>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-core.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-cartesian.min.js\"><\/script>\r\n  <style>\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n  <script>\r\n    \/\/ The stacked area chart's JS code will be written here.\r\n  <\/script>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
      Step 3: Add the data to visualize<\/h3>\n
      Load the data<\/h4>\n
      The COVID-19 pandemic is the top-news subject worldwide. In this tutorial, I decided to focus on Italy, the first area outside of China that has been tremendously affected by this crisis. I will visualize data with the number of active cases, recoveries, and deaths to see how the situation has been evolving from the beginning of the\u00a0outbreak in Italy until the very present time.<\/p>\n
      I took data\u00a0from the Johns Hopkins CSSE dataset<\/a>, which is considered a trustworthy source of official COVID-19 statistics.\u00a0For the sake of simplicity,\u00a0I put\u00a0the\u00a0Italian data in\u00a0one CSV file which you can find here<\/a>. Active cases were calculated by subtracting deaths and recoveries from the confirmed cases.<\/p>\n
      Loading the CSV file<\/a> in AnyChart can be done with the help of the Data Adapter<\/a> module, which you should reference in the <head><\/code> section in addition to the library’s scripts that are already referenced there:<\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n  <title>Stacked Area Chart<\/title>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-core.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-cartesian.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n  <style>\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n  <script>\r\n    \/\/ The stacked area chart's JS code will be written here.\r\n  <\/script>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
      Now you can use the loadCsvFile<\/a> method provided by the Data Adapter to load the CSV data.<\/p>\n
      anychart.data.loadCsvFile (\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/covid-19-italy\/data.csv\", function (data) {\r\n});<\/code><\/pre>\n
      Then, set the data<\/a> to be ready for use in your future JavaScript-based stacked area chart:<\/p>\n
      anychart.data.loadCsvFile (\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/covid-19-italy\/data.csv\", function (data) {\r\n  \/\/ set the data and ignore the first row that contains headers\r\n  var dataSet = anychart.data.set(data, {ignoreFirstRow: true});\r\n});<\/code><\/pre>\n
      Map the data<\/h4>\n
      The chart will display data from three fields: active cases, recoveries, and deaths.\u00a0So you will need three different data series, one for each field. But how will you \u201cinform\u201d your chart which data to use for each field?<\/p>\n
      Here is where\u00a0data mapping<\/a> comes into play! Observe how this is implemented in the code through calling the mapAs<\/a> method:<\/p>\n
      \/\/ map data for the deaths series\r\nvar deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });\r\n\r\n\/\/ map data for the recovered series\r\nvar recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });\r\n\r\n\/\/ map data for the active series\r\nvar activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });<\/code><\/pre>\n
      Step 4: Write the JS code for your chart<\/h3>\n
      Now that everything\u00a0seems to be in place, you are ready to start coding the JS stacked area chart visualization.<\/p>\n
      First,\u00a0add the anychart.onDocumentReady<\/code> function, which will enclose the whole code of the chart and will be executed when the page is ready.<\/p>\n
      <script>\r\n\r\nanychart.onDocumentReady(function () {\r\n  \/\/ The stacked area chart's code will be written here.\r\n});\r\n\r\n<\/script><\/code><\/pre>\n
      Next, add the data from step 3:<\/p>\n
      <script>\r\n\r\nanychart.onDocumentReady(function () {\r\n  anychart.data.loadCsvFile (\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/covid-19-italy\/data.csv\", function (data) {\r\n    \/\/ set the data and ignore the first row that contains headers\r\n    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});\r\n  });\r\n});\r\n\r\n<\/script><\/code><\/pre>\n
      Then, specify the chart type, set the series and force the chart to stack values by the Y scale:<\/p>\n
      \/\/ specify the area chart type\r\nvar chart = anychart.area();\r\n\r\n\/\/ create a series with the mapped active data\r\nvar actSeries = chart.splineArea(activeData);\r\n\r\n\/\/ create a series with the mapped recovered data\r\nvar recSeries = chart.splineArea(recoveredData);\r\n\r\n\/\/ create a series with the mapped deaths data\r\nvar deathsSeries = chart.splineArea(deathsData);\r\n\r\n\/\/ force the chart to stack values by the y scale\r\nchart.yScale().stackMode('value');<\/code><\/pre>\n
      For clarity, let\u2019s give it a title and name its axes (see\u00a0tips on writing great chart captions<\/a>\u00a0if you need\u00a0advice):<\/p>\n
      \/\/ set the chart title\r\nchart.title('Covid-19 in Italy');\r\n\r\n\/\/ set the labels of the axes\r\nchart.xAxis().title(\"Date\");\r\nchart.yAxis().title(\"Number of people\");<\/code><\/pre>\n
      One more thing: I also want to add a vertical line that will move with the mouse, which should make it easier to see\u00a0where is what at a glance.\u00a0In AnyChart,\u00a0simply use the crosshair<\/a> feature. The following code shows how can enable the crosshair,\u00a0with some additional styling:<\/p>\n
      \/\/ turn on the crosshair\r\nvar crosshair = chart.crosshair();\r\ncrosshair.enabled(true)\r\n  .yStroke(null)\r\n  .xStroke('#fff')\r\n  .zIndex(39);\r\ncrosshair.yLabel().enabled(false);<\/code><\/pre>\n
      Finally, draw the chart by putting it into the container and using the drawing command.<\/p>\n
      \/\/ set the container id for the chart\r\nchart.container('container');\r\n\r\n\/\/ initiate chart drawing\r\nchart.draw();<\/code><\/pre>\n
      Enjoy the result:<\/p>\n