{"id":12366,"date":"2021-03-16T16:47:35","date_gmt":"2021-03-16T16:47:35","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=12366"},"modified":"2022-08-13T11:04:40","modified_gmt":"2022-08-13T11:04:40","slug":"waterfall-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/","title":{"rendered":"Creating Waterfall Chart with JS"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/\"><img decoding=\"async\" class=\"alignnone size-full wp-image-12379\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png\" alt=\"A Waterfall Chart with JS\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png 1620w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart-300x167.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart-768x427.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart-1024x569.png 1024w\" sizes=\"(max-width: 1620px) 100vw, 1620px\" \/><\/a><strong>Do you\u00a0want to know how to easily add\u00a0a waterfall chart\u00a0to a web page\u00a0or\u00a0application using JavaScript? This tutorial will make sure you&#8217;re\u00a0prepared to confidently\u00a0deal with that sort of\u00a0interactive data visualization development!<\/strong><\/p>\n<p><a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/waterfall-chart\/\">Waterfall charts<\/a>\u00a0illuminate how a starting value\u00a0turns into a final value over a sequence of intermediate additions (positive values) and subtractions (negative values). These additions and subtractions can be\u00a0time-based or represent\u00a0categories such as multiple income sources and expenditures. In finance, a waterfall chart is often called a bridge; you may have also heard it referred to as a cascade, Mario,\u00a0or flying bricks chart.<\/p>\n<p>To see waterfall charts in action and learn how to build them with JavaScript (HTML5),\u00a0we need\u00a0some interesting real-world data to visualize. In this tutorial, let&#8217;s\u00a0look at the <strong>2020 income statement\u00a0for Alphabet Inc.<\/strong> (GOOGL), the parent company of Google.<\/p>\n<p>Hence, be with me to\u00a0reach our target step by step, so in the end, you&#8217;ll see how a lot of numbers can be made sense of with real ease when illustrated\u00a0as\u00a0a\u00a0beautiful,\u00a0interactive, JS waterfall chart. All aboard!<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>How to Create Basic JS Waterfall Chart<\/h2>\n<p>Generally speaking, there are four fundamental steps to take when\u00a0visualizing\u00a0any\u00a0chart in JS:<\/p>\n<ul>\n<li>Step 1: Create\u00a0an HTML\u00a0page.<\/li>\n<li>Step 2: Reference\u00a0all necessary\u00a0JavaScript libraries.<\/li>\n<li>Step 3: Load the dataset required to be visualized.<\/li>\n<li>Step 4: Write\u00a0some JS charting code.<\/li>\n<\/ul>\n<p>Let&#8217;s follow these steps now and build a cool JavaScript waterfall chart based on that approach. In reality, it&#8217;s all quick.<\/p>\n<h3>Step 1: Create an HTML page<\/h3>\n<p>The first thing is to make an HTML page where the waterfall chart can be rendered.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Waterfall Chart Example&lt;\/title&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;style&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #WaterfallContainer {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0  }\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;\r\n\u00a0\u00a0&lt;\/head&gt;\r\n\u00a0\u00a0&lt;body&gt;\r\n    &lt;div id=\"WaterfallContainer\"&gt;\r\n      \/\/ Place the waterfall chart here.\r\n    &lt;\/div&gt;\r\n\u00a0\u00a0&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>The HTML page created as shown above has a title included in the <code>&lt;title&gt;<\/code>\u00a0tag.\u00a0The styling sheet is determined in\u00a0<code>&lt;style&gt;<\/code>. Feel free to customize these according to your preference.<\/p>\n<p>In the <code>&lt;body&gt;<\/code>\u00a0section,\u00a0there is a\u00a0<code>&lt;div&gt;<\/code>\u00a0element that\u00a0will be used as a\u00a0container\u00a0for the\u00a0waterfall chart.\u00a0It should have an id so we can easily refer to it later. In this case, its id is set as\u00a0<code>WaterfallContainer<\/code>.<\/p>\n<h3>Step 2:\u00a0Reference all necessary JavaScript libraries<\/h3>\n<p>Second, we need to\u00a0connect\u00a0all relevant JS scripts that will be used to\u00a0generate the waterfall chart. The URLs\u00a0go\u00a0in the <code>&lt;script&gt;<\/code> tag inside of the\u00a0<code>&lt;head&gt;<\/code>\u00a0section.\u00a0For this tutorial, I\u00a0have chosen <a href=\"https:\/\/www.anychart.com\">AnyChart<\/a>&#8216;s JavaScript charting library. It&#8217;s\u00a0powerful, flexible,\u00a0and\u00a0easy-to-use, making charts promptly visualized on your web pages. The process, however, is pretty universal.<\/p>\n<p>AnyChart is <a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Modules\" target=\"_blank\" rel=\"nofollow\">modular<\/a>, which means you don&#8217;t have to load the full library when you only need some of its charts and features. To create a waterfall chart, we need\u00a0just the core library module, which is required for all types of charts, and the dedicated &#8220;Waterfall&#8221; module.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Waterfall Chart Example&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-waterfall.min.js\"&gt;&lt;\/script&gt;      \r\n    &lt;style&gt;\r\n      html, body, #WaterfallContainer {\r\n        width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;script&gt;\r\n      \/\/ Place the waterfall chart here.\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<h3>Step 3: Load the dataset\u00a0required\u00a0to be visualized in a waterfall chart<\/h3>\n<p>So, in order to\u00a0show you\u00a0the beauty\u00a0and mission of waterfall charts,\u00a0I needed\u00a0a dataset where the initial value is\u00a0impacted by a series of intermediate values, positive and negative.<\/p>\n<p>I decided to look at the annual <a href=\"https:\/\/www.stock-analysis-on.net\/NASDAQ\/Company\/Alphabet-Inc\/Financial-Statement\/Income-Statement\" target=\"_blank\" rel=\"nofollow\">income statement of Alphabet Inc.<\/a> for the year 2020. Here&#8217;s\u00a0the dataset I prepared for this JS waterfall chart tutorial based on it:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th style=\"padding: 15px; text-align: center;\"><strong>Breakdown<\/strong><\/th>\n<th style=\"padding: 15px; text-align: center;\"><strong>USD in millions<\/strong><\/th>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Total Revenue<\/td>\n<td style=\"padding: 6px 15px;\">182,527<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Cost of Revenue<\/td>\n<td style=\"padding: 6px 15px;\">(84,732)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Gross Profit<\/td>\n<td style=\"padding: 6px 15px;\">97,795<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Operating Expenses<\/td>\n<td style=\"padding: 6px 15px;\">(56,571)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Operating Income<\/td>\n<td style=\"padding: 6px 15px;\">41,224<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Other Income<\/td>\n<td style=\"padding: 6px 15px;\">8,583<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Other Expenses<\/td>\n<td style=\"padding: 6px 15px;\">(1,725)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Income Before Taxes<\/td>\n<td style=\"padding: 6px 15px;\">48,082<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Provision for Taxes<\/td>\n<td style=\"padding: 6px 15px;\">(7,813)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Net Income<\/td>\n<td style=\"padding: 6px 15px;\">40,269<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<br \/>\nNow that we&#8217;ve got the data, let&#8217;s transmute it into an array of objects:<\/p>\n<pre><code class=\"javascript\">var data = [\r\n  { x: 'Total Revenue', value: 182527 },\r\n  { x: 'Cost of Revenue', value: -84732 },\r\n  { x: 'Gross Profit', isTotal: true },\r\n  { x: 'Operating Expenses', value: -56571 },\r\n  { x: 'Operating Income', isTotal: true },\r\n  { x: 'Interest Income', value: 8583 },\r\n  { x: 'Other Expenses', value: -1725 },\r\n  { x: 'Income Before Taxes', isTotal: true },\r\n  { x: 'Provision for Taxes', value: -7813 },\r\n  { x: 'Net Income', isTotal: true }\r\n];\r\n<\/code><\/pre>\n<p>If you carefully look at the snippet above, there is a keyword called <code>isTotal<\/code>. It is used to show totals, and basically when you need to get the cumulative value of a series of additions and subtractions, just include it with the value\u00a0<code>true<\/code>. That&#8217;s right, you don\u2019t even\u00a0have to calculate anything as the library does that for you, on the fly.<\/p>\n<h3>Step 4: Write\u00a0the\u00a0JS waterfall charting code<\/h3>\n<p>So far, everything is in place and we are literally one step\u00a0to\u00a0the waterfall chart visualization. With just a few more lines of JavaScript code, it will be ready for you to check out and even integrate it anywhere for further analytics.<\/p>\n<p>Everything\u00a0we&#8217;ve prepared earlier needs to be\u00a0put inside the <code>anychart.onDocumentReady()<\/code> function that\u00a0must be placed in the <code>&lt;script&gt;<\/code>\u00a0tag residing in the <code>&lt;body&gt;<\/code>\u00a0section of our\u00a0HTML page.<\/p>\n<pre><code class=\"html\">&lt;script&gt;\r\n  anychart.onDocumentReady(function() {\r\n    \/\/ The entire JS code of the waterfall chart will be here.\r\n  });\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>Next, simply command to create a waterfall chart\u00a0and feed it the dataset as we\u00a0shaped it in Step 3:<\/p>\n<pre><code class=\"javascript\">var chart = anychart.waterfall(data);\r\n<\/code><\/pre>\n<p>Shall we set the main title for our chart?<\/p>\n<pre><code class=\"javascript\">chart.title('Income Statement for Alphabet Inc. (GOOGL), 2020');\r\n<\/code><\/pre>\n<p>Ultimately, let\u2019s draw the\u00a0resulting JS waterfall chart in the container we set in Step 1:<\/p>\n<pre><code class=\"javascript\">\/\/ set the container id for the waterfall chart\r\nchart.container('WaterfallContainer');\r\n\r\n\/\/ draw the resulting chart\r\nchart.draw();\t\r\n<\/code><\/pre>\n<p>Let\u2019s have a look at the result below! It&#8217;s a basic interactive JavaScript-based waterfall chart visualizing Google&#8217;s 2020 income statement, which we&#8217;ve just created in just a very few lines of code.<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-HCwZE7Cr\" src=\"https:\/\/playground.anychart.com\/HCwZE7Cr\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-HCwZE7Cr{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>For your convenience, the complete code is below and you are welcome to inspect it\u00a0on <a href=\"https:\/\/playground.anychart.com\/HCwZE7Cr\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>. Keep reading though as customizations are approaching!<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Waterfall Chart Example &lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-waterfall.min.js\"&gt;&lt;\/script&gt;      \r\n    &lt;style&gt;\r\n\u00a0     html, body, #WaterfallContainer {\r\n\u00a0       width: 100%;\r\n\u00a0       height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;script&gt;\r\n\r\n      anychart.onDocumentReady(function () {\r\n\r\n        \/\/ set the data\r\n        var data = [\r\n          { x: 'Total Revenue', value: 182527 },\r\n          { x: 'Cost of Revenue', value: -84732 },\r\n          { x: 'Gross Profit', isTotal: true },\r\n          { x: 'Operating Expenses', value: -56571 },\r\n          { x: 'Operating Income', isTotal: true },\r\n          { x: 'Interest Income', value: 8583 },\r\n          { x: 'Other Expenses', value: -1725 },\r\n          { x: 'Income Before Taxes', isTotal: true },\r\n          { x: 'Provision for Taxes', value: -7813 },\r\n          { x: 'Net Income', isTotal: true }\r\n        ];\r\n\r\n        \/\/ create a waterfall chart with the data\r\n        var chart = anychart.waterfall(data);\r\n\r\n        \/\/ set the chart title\r\n        chart.title('Income Statement for Alphabet Inc. (GOOGL), 2020');\r\n\r\n        \/\/ set the container id for the waterfall chart\r\n        chart.container('WaterfallContainer');\r\n          \r\n        \/\/ draw the resulting chart\r\n        chart.draw();\r\n\r\n      });\r\n\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<h2>Customizing JS Waterfall Chart<\/h2>\n<p>I believe you agree that the basic JS waterfall chart we&#8217;ve built already looks good. But there&#8217;s always room for improvement, isn&#8217;t it?<\/p>\n<p>When it comes to customization, it&#8217;s essential that the data visualization library you are using\u00a0be flexible enough to let you implement what you want in a simple manner. For example, now I will show you how, with hardly more than a handful of\u00a0intuitive\u00a0effort, we can make our waterfall chart more engaging and artistic.<\/p>\n<h3>Work with\u00a0the axes<\/h3>\n<p>Let&#8217;s start with adding the $ sign before the values to make it absolutely clear those sums are in USD:<\/p>\n<pre><code class=\"javascript\">chart.yAxis().labels().format('${%Value}');\r\n<\/code><\/pre>\n<p>We can also add\u00a0a title for the Y-axis, specifying that the figures are provided in millions:<\/p>\n<pre><code class=\"javascript\">chart.yAxis().title('Amount (in millions)');<\/code><\/pre>\n<p>The X-axis labels (category names) are quite long. Let&#8217;s put them vertically. Just set the X-axis label rotation like that:<\/p>\n<pre><code class=\"javascript\">chart.xAxis().labels().rotation(-90);<\/code><\/pre>\n<p>Look\u00a0what we&#8217;ve got!\u00a0(See this\u00a0customized JS waterfall chart on\u00a0<a href=\"https:\/\/playground.anychart.com\/2JfFUnXd\/\" rel=\"follow noopener noreferrer nofollow\" data-wpel-link=\"internal\" target=\"_blank\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-2JfFUnXd\" src=\"https:\/\/playground.anychart.com\/2JfFUnXd\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-2JfFUnXd{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>Style the connectors<\/h3>\n<p>Now, let&#8217;s modify the waterfall chart&#8217;s connectors, the lines drawn between the\u00a0columns.<\/p>\n<p>Use the <code>connectorStroke()<\/code> method to adjust the stroke of the connectors. Its detailed parameter explanation can be found in the <a href=\"https:\/\/api.anychart.com\/v8\/anychart.charts.Waterfall#connectorStroke\" target=\"_blank\" rel=\"nofollow\">API Reference<\/a>.<\/p>\n<pre><code class=\"javascript\">chart.connectorStroke(\"#ff6666\", 2, \"2 2\", \"round\");\r\n<\/code><\/pre>\n<p>Check out the result below.\u00a0(See\u00a0this customized JS waterfall chart with newly designed connectors\u00a0on <a href=\"https:\/\/playground.anychart.com\/B52LYkpY\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-B52LYkpY\" src=\"https:\/\/playground.anychart.com\/B52LYkpY\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-B52LYkpY{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>Customize\u00a0the waterfall column labels using HTML<\/h3>\n<p>It can be great to configure HTML formatted labels in the waterfall chart. To enable HTML, just set the parameter of the <code>useHtml()<\/code> method as <code>true<\/code>. Then simply add the necessary HTML tags and they will work.<\/p>\n<pre><code class=\"javascript\">\/\/ enable HTML for the labels\r\nchart.labels().useHtml(true);         \r\n\r\n\/\/ customize the labels\r\nchart.labels().format(function() {\r\n  if (this.isTotal)\r\n    return \"&lt;span style=\"color: #dd2c00; font-weight: bold;\"&gt;\" +\r\n      this.absolute + \"&lt;\/span&gt;\";\r\n  return this.diff;\r\n});\r\n<\/code><\/pre>\n<p>According to the above configuration, the <code>chart.labels().format()<\/code> method returns a <code>&lt;span&gt;<\/code> element with special HTML-based formatting for the column labels\u00a0displaying totals.<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-8MrcmwvW\" src=\"https:\/\/playground.anychart.com\/8MrcmwvW\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-8MrcmwvW{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>You can see that the column labels, which indicate total values, have been formatted with bold red letters. (See\u00a0this customized JS waterfall chart with HTML formatted labels on <a href=\"https:\/\/playground.anychart.com\/8MrcmwvW\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<h3>Change the appearance of\u00a0the waterfall columns<\/h3>\n<p>Instead of using default colors, this is high time to personalize the column appearances and make them elegant by giving a touch of some magnificent colors.<\/p>\n<p>To change the design that way, we need an explicitly defined series.\u00a0So, in this case, we create a\u00a0waterfall chart, then\u00a0configure a series, and then feed the data:<\/p>\n<pre><code class=\"javascript\">\/\/ create a waterfall chart\r\nvar chart = anychart.waterfall();\r\n\r\n\/\/ create a series and set the data\r\nvar series = chart.waterfall(data);\r\n<\/code><\/pre>\n<p>The appearance of the waterfall chart columns can be configured\u00a0for three different states:\u00a0<code>normal()<\/code>, <code>hovered()<\/code>, and <code>selected()<\/code>.\u00a0To change the look of the columns which represent\u00a0totals, these methods can be combined with such methods\u00a0as\u00a0<code>fill()<\/code> to set the fill, <code>hatchFill()<\/code> to set the hatch fill, and <code>stroke()<\/code> to set the stroke.<\/p>\n<p>Taking the same approach, we can adjust the appearance of falling and rising columns as shown below.<\/p>\n<pre><code>\/\/ configure the visual settings of the total columns\r\nseries.normal().fill(\"#ff6666\", 0.3);\r\nseries.normal().hatchFill(\"forward-diagonal\", \"#ff6666\", 0.5, 10);\r\nseries.normal().stroke(\"#ff6666\");\r\nseries.hovered().fill(\"#ff6666\", 0.1);\r\nseries.hovered().hatchFill(\"forward-diagonal\", \"#ff6666\", 0.5, 10);\r\nseries.hovered().stroke(\"#ff6666\", 2);\r\nseries.selected().fill(\"#ff6666\", 0.5);\r\nseries.selected().hatchFill(\"forward-diagonal\", \"#ff6666\", 0.5, 10);\r\nseries.selected().stroke(\"#ff6666\", 4);\r\n \r\n\/\/ configure the visual settings of the falling columns\r\nseries.normal().fallingFill(\"#00cc99\", 0.3);\r\nseries.normal().fallingStroke(\"#00cc99\", 1, \"10 5\", \"round\");\r\nseries.hovered().fallingFill(\"#00cc99\", 0.1);\r\nseries.hovered().fallingStroke(\"#00cc99\", 2, \"10 5\", \"round\");\r\nseries.selected().fallingFill(\"#00cc99\", 0.5);\r\nseries.selected().fallingStroke(\"#00cc99\", 4, \"10 5\", \"round\");\r\n \r\n\/\/ configure the visual settings of the rising columns\r\nseries.normal().risingFill(\"#0066cc\", 0.3);\r\nseries.normal().risingStroke(\"#0066cc\");\r\nseries.hovered().risingFill(\"#0066cc\", 0.1);\r\nseries.hovered().risingStroke(\"#0066cc\", 2);\r\nseries.selected().risingFill(\"#0066cc\", 0.5);\r\nseries.selected().risingStroke(\"#0066cc\", 4);\r\n<\/code><\/pre>\n<p>Now the waterfall chart looks exquisite with such soft colors, right? Do the changes according to your preference and make your final output even more elegant! (See this final customized JS waterfall chart\u00a0on <a href=\"https:\/\/playground.anychart.com\/ATF8n4Lg\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-ATF8n4Lg\" src=\"https:\/\/playground.anychart.com\/ATF8n4Lg\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-ATF8n4Lg{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>So, what does the waterfall chart tell us? The visualization above shows\u00a0how Alphabet&#8217;s total revenue of $182.5 billion turns into a net income of almost $40.3 billion,\u00a0representing the major flows of income and expense in the 12 months of 2020. Feel free to explore and analyze!<\/p>\n<h2>Conclusion<\/h2>\n<p>Instead of reading and going through\u00a0raw numbers, isn\u2019t it a better idea to use a cool waterfall chart and get valuable observations without much effort?<\/p>\n<p>You can also visualize\u00a0multiple series. Go through the\u00a0<a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Waterfall_Chart\" target=\"_blank\" rel=\"nofollow\">Waterfall Chart Documentation<\/a>\u00a0and delve into more details of what else can be done and how.<\/p>\n<p>Good luck with interactive <a href=\"https:\/\/www.anychart.com\/blog\/2018\/11\/20\/data-visualization-definition-history-examples\/\">data visualization<\/a> with JavaScript,\u00a0in waterfall charts and beyond.<\/p>\n<hr \/>\n<p><em>We at AnyChart are glad to thank Dilhani Withanage for writing this stunning JS Waterfall Chart tutorial.<\/p>\n<p>If you want to create an interesting guest post for our blog, <a href=\"https:\/\/www.anychart.com\/support\/\">get in touch<\/a>.<\/em><\/p>\n<hr \/>\n<p><em>Check out other <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\">JavaScript charting tutorials<\/a>.<\/em><\/p>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Do you\u00a0want to know how to easily add\u00a0a waterfall chart\u00a0to a web page\u00a0or\u00a0application using JavaScript? This tutorial will make sure you&#8217;re\u00a0prepared to confidently\u00a0deal with that sort of\u00a0interactive data visualization development! Waterfall charts\u00a0illuminate how a starting value\u00a0turns into a final value over a sequence of intermediate additions (positive values) and subtractions (negative values). These additions and [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,8,23,13,279,4],"tags":[2285,53,284,127,258,471,266,620,294,54,1760,256,1111,744,844,130,145,47,912,1035,2289,1762,2013,2014,32,55,878,2286,2287,2288,144,36,907,141,249,81,57,99,58,65,56,459,30,172,243,2015,1763,804],"class_list":["post-12366","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-business-intelligence","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-alphabet-inc","tag-anychart","tag-chart-examples","tag-chart-types","tag-charts","tag-data-analysis","tag-data-analytics","tag-data-analytics-examples","tag-data-science","tag-data-visualization","tag-data-visualization-design","tag-data-visualization-examples","tag-data-visualization-practice","tag-data-visualization-techniques","tag-data-visualization-tutorial","tag-data-visualization-weekly","tag-dataviz-weekly","tag-financial-charts","tag-financial-data","tag-google","tag-google-income-statement-2020","tag-guest-post","tag-html","tag-html-charts","tag-html5","tag-html5-charts","tag-income-data","tag-income-statement","tag-income-statement-data","tag-income-statement-data-visualization","tag-infographics","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-api","tag-javascript-charting-library","tag-javascript-charts","tag-javascript-library","tag-js-chart","tag-js-charting","tag-js-charts","tag-statistics","tag-tips-and-tricks","tag-tutorial","tag-waterfall-chart","tag-web-charts","tag-web-developers","tag-web-development","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Waterfall Chart and How to Create It with JavaScript (HTML5)<\/title>\n<meta name=\"description\" content=\"Need a Waterfall Chart for a web page or app? This tutorial will get you ready for that sort of interactive data visualization development with JavaScript!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Waterfall Chart with JavaScript (HTML5)\" \/>\n<meta property=\"og:description\" content=\"Need a Waterfall Chart for a web page or app? This tutorial will get you ready for that sort of interactive data visualization development with JavaScript!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-16T16:47:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-13T11:04:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dilhani Withanage\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create Waterfall Chart with JS\" \/>\n<meta name=\"twitter:description\" content=\"Need a Waterfall Chart for a web page or app? This tutorial will get you ready for that sort of interactive data visualization development with JavaScript!\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dilhani Withanage\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/\"},\"author\":{\"name\":\"Dilhani Withanage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41\"},\"headline\":\"Creating Waterfall Chart with JS\",\"datePublished\":\"2021-03-16T16:47:35+00:00\",\"dateModified\":\"2022-08-13T11:04:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/\"},\"wordCount\":1456,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png\",\"keywords\":[\"Alphabet Inc.\",\"AnyChart\",\"chart examples\",\"chart types\",\"charts\",\"data analysis\",\"data analytics\",\"data analytics examples\",\"data science\",\"Data Visualization\",\"data visualization design\",\"data visualization examples\",\"data visualization practice\",\"data visualization techniques\",\"data visualization tutorial\",\"data visualization weekly\",\"dataviz weekly\",\"Financial charts\",\"financial data\",\"Google\",\"Google income statement 2020\",\"guest post\",\"HTML\",\"HTML charts\",\"HTML5\",\"html5 charts\",\"income data\",\"income statement\",\"income statement data\",\"income statement data visualization\",\"infographics\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"javascript charting api\",\"JavaScript charting library\",\"javascript charts\",\"JavaScript library\",\"js chart\",\"js charting\",\"js charts\",\"statistics\",\"Tips and tricks\",\"tutorial\",\"waterfall chart\",\"web charts\",\"web developers\",\"web development\"],\"articleSection\":[\"AnyChart Charting Component\",\"Business Intelligence\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/\",\"name\":\"Waterfall Chart and How to Create It with JavaScript (HTML5)\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png\",\"datePublished\":\"2021-03-16T16:47:35+00:00\",\"dateModified\":\"2022-08-13T11:04:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41\"},\"description\":\"Need a Waterfall Chart for a web page or app? This tutorial will get you ready for that sort of interactive data visualization development with JavaScript!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png\",\"width\":1620,\"height\":900},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Waterfall Chart with JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41\",\"name\":\"Dilhani Withanage\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/35ee7b2273ffffdaea96beb03771380fac7258a4904e0c8de2b474d8f27b8962?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/35ee7b2273ffffdaea96beb03771380fac7258a4904e0c8de2b474d8f27b8962?s=96&r=g\",\"caption\":\"Dilhani Withanage\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/dilhani_withanage\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Waterfall Chart and How to Create It with JavaScript (HTML5)","description":"Need a Waterfall Chart for a web page or app? This tutorial will get you ready for that sort of interactive data visualization development with JavaScript!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Waterfall Chart with JavaScript (HTML5)","og_description":"Need a Waterfall Chart for a web page or app? This tutorial will get you ready for that sort of interactive data visualization development with JavaScript!","og_url":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2021-03-16T16:47:35+00:00","article_modified_time":"2022-08-13T11:04:40+00:00","og_image":[{"width":1620,"height":900,"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png","type":"image\/png"}],"author":"Dilhani Withanage","twitter_card":"summary_large_image","twitter_title":"How to Create Waterfall Chart with JS","twitter_description":"Need a Waterfall Chart for a web page or app? This tutorial will get you ready for that sort of interactive data visualization development with JavaScript!","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Dilhani Withanage","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/"},"author":{"name":"Dilhani Withanage","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41"},"headline":"Creating Waterfall Chart with JS","datePublished":"2021-03-16T16:47:35+00:00","dateModified":"2022-08-13T11:04:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/"},"wordCount":1456,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png","keywords":["Alphabet Inc.","AnyChart","chart examples","chart types","charts","data analysis","data analytics","data analytics examples","data science","Data Visualization","data visualization design","data visualization examples","data visualization practice","data visualization techniques","data visualization tutorial","data visualization weekly","dataviz weekly","Financial charts","financial data","Google","Google income statement 2020","guest post","HTML","HTML charts","HTML5","html5 charts","income data","income statement","income statement data","income statement data visualization","infographics","JavaScript","javascript chart tutorial","javascript charting","javascript charting api","JavaScript charting library","javascript charts","JavaScript library","js chart","js charting","js charts","statistics","Tips and tricks","tutorial","waterfall chart","web charts","web developers","web development"],"articleSection":["AnyChart Charting Component","Business Intelligence","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/","url":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/","name":"Waterfall Chart and How to Create It with JavaScript (HTML5)","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png","datePublished":"2021-03-16T16:47:35+00:00","dateModified":"2022-08-13T11:04:40+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41"},"description":"Need a Waterfall Chart for a web page or app? This tutorial will get you ready for that sort of interactive data visualization development with JavaScript!","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/03\/waterfall-chart.png","width":1620,"height":900},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2021\/03\/16\/waterfall-chart-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Waterfall Chart with JS"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41","name":"Dilhani Withanage","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/35ee7b2273ffffdaea96beb03771380fac7258a4904e0c8de2b474d8f27b8962?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/35ee7b2273ffffdaea96beb03771380fac7258a4904e0c8de2b474d8f27b8962?s=96&r=g","caption":"Dilhani Withanage"},"url":"https:\/\/www.anychart.com\/blog\/author\/dilhani_withanage\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/12366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=12366"}],"version-history":[{"count":61,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/12366\/revisions"}],"predecessor-version":[{"id":15507,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/12366\/revisions\/15507"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=12366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=12366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=12366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}