{"id":16970,"date":"2023-11-02T08:56:30","date_gmt":"2023-11-02T08:56:30","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16970"},"modified":"2023-11-03T13:44:06","modified_gmt":"2023-11-03T13:44:06","slug":"waterfall-charts-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/11\/02\/waterfall-charts-javascript\/","title":{"rendered":"Building Waterfall Charts in JS"},"content":{"rendered":"

\"Waterfall<\/a>Data visualization<\/strong> is an essential tool for understanding complex data sets and effectively conveying insights. Among the various types of charts and graphs used for this purpose, the waterfall chart<\/strong> stands out as a powerful way to represent changes in financial data, such as revenue, expenses, and profits over a specific period.<\/p>\n

In this tutorial, we'll explore how to create a waterfall chart using JavaScript<\/strong>. To illustrate the process, we'll use the example of an income statement for a company, in this case, Twitter Inc.\u2019s latest (and last) one.<\/p>\n

Whether it\u2019s to analyze a company's financial performance, project budgets, or inventory fluctuations, this step-by-step guide will help you easily create a useful interactive JS-based waterfall chart.<\/p>\n

<\/p>\n

Waterfall Chart That Will Be Created<\/h2>\n

Here\u2019s the JavaScript-based waterfall chart that will be the final visualization of this tutorial. Take a quick look at it, and let\u2019s get started.<\/p>\n

\"Final<\/a><\/p>\n

A. Creating Basic JS Waterfall Chart<\/h2>\n

If you're new to creating JS charts, don't worry; it's easier than you think! You can create stunning charts, including waterfall plots, following these four fundamental steps:<\/p>\n

    \n
  1. Create a container<\/li>\n
  2. Include the necessary JavaScript files<\/li>\n
  3. Add data to visualize<\/li>\n
  4. Write simple JS charting code<\/li>\n<\/ol>\n

    Step 1: Create Container<\/h3>\n

    Begin by setting up a container for your waterfall chart. This involves adding a block-level HTML element to your webpage, defining its id, and specifying its width and height.<\/p>\n

    This is how your HTML structure could look:<\/p>\n

    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <title<\/span>><\/span>JavaScript Waterfall Chart<\/title<\/span>><\/span>  \r\n    <style<\/span>><\/span>\r\n      html<\/span>, body<\/span>, #WaterfallContainer<\/span> {\r\n        width<\/span>: 100%<\/span>;\r\n        height<\/span>: 100%<\/span>;\r\n        margin<\/span>: 0<\/span>;\r\n        padding<\/span>: 0<\/span>;\r\n      }\r\n    <\/span><\/style<\/span>><\/span>\r\n  <\/head<\/span>><\/span>\r\n  <body<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"WaterfallContainer\"<\/span>><\/span><\/div<\/span>><\/span>\r\n  <\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    Step 2: Include Necessary JavaScript Files<\/h3>\n
    Once the container is set up, include the necessary JavaScript files in the <head><\/code> section. This tutorial shows how you can use a JS charting library like AnyChart<\/a>.<\/p>\n
    Here\u2019s how your HTML might look with the necessary <script><\/code> tags included:<\/p>\n
    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <title<\/span>><\/span>JavaScript Waterfall Chart<\/title<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-waterfall.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <style<\/span>><\/span>\r\n      html<\/span>, body<\/span>, #WaterfallContainer<\/span> {\r\n        width<\/span>: 100%<\/span>;\r\n        height<\/span>: 100%<\/span>;\r\n        margin<\/span>: 0<\/span>;\r\n        padding<\/span>: 0<\/span>;\r\n      }\r\n    <\/span><\/style<\/span>><\/span>\r\n  <\/head<\/span>><\/span>\r\n  <body<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"WaterfallContainer\"<\/span>><\/span><\/div<\/span>><\/span>\r\n    <script<\/span>><\/span>\r\n      \/\/ All the code for the waterfall chart will come here.<\/span>\r\n    <\/span><\/script<\/span>><\/span>\r\n  <\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    Step 3: Add Data to Visualize<\/h3>\n
    Next, it's time to add data to visualize. The data for Twitter Inc.'s last income statement (Twitter Inc. no longer exists<\/a>; the company is now a part of X Corp.) originates from here<\/a>. For a waterfall chart, you can set the data in many ways; I will include it just like that directly in the code.<\/p>\n
    Below is an example of a data set, where the data is structured as an array. Each item contains an "x" and "value" fields. The "x" field represents the name of the corresponding item of the income statement, while the "value" field signifies the magnitude of each data point.<\/p>\n
    var data = [\r\n  { x:<\/span> \"Revenue\"<\/span>, value:<\/span> 5077.482<\/span> },\r\n  { x:<\/span> \"Cost of revenue\"<\/span>, value:<\/span> -1797.510<\/span> },\r\n  { x:<\/span> \"Gross profit\"<\/span>, isTotal:<\/span> true<\/span> },\r\n  { x:<\/span> \"Operating expenses\"<\/span>, value:<\/span> -3772.711<\/span> },\r\n  { x:<\/span> \"Income (loss) from operations\"<\/span>, isTotal:<\/span> true<\/span> },\r\n  { x:<\/span> \"Interest expense\"<\/span>, value:<\/span> -51.186<\/span> },\r\n  { x:<\/span> \"Interest income\"<\/span>, value:<\/span> 35.683<\/span> },\r\n  { x:<\/span> \"Other income (expense), net\"<\/span>, value:<\/span> 97.129<\/span> },\r\n  { x:<\/span> \"Income (loss) before income taxes\"<\/span>, isTotal:<\/span> true<\/span> },\r\n  { x:<\/span> \"(Provision) benefit for income taxes\"<\/span>, value:<\/span> 189.704<\/span> },\r\n  { x:<\/span> \"Net income (loss)\"<\/span>, isTotal:<\/span> true<\/span> }\r\n];\r\n<\/code><\/pre>\n
    Step 4: Write Simple JS Charting Code<\/h3>\n
    Now, you can easily visualize the data with just a few lines of charting code.<\/p>\n
    Start by ensuring your code executes only when the page has fully loaded by wrapping it up in a function like the one below.<\/p>\n
    anychart.onDocumentReady(function<\/span> ()<\/span> <\/span>{\r\n  \/\/ Your code goes here.<\/span>\r\n});\r\n<\/code><\/pre>\n
    Now, it's time to define the data you want to visualize, taking it from the previous step.<\/p>\n
    anychart.onDocumentReady(function () {\r\n\r\n  \/\/ set the data<\/span>\r\n  var data = [\r\n    { x:<\/span> \"Revenue\"<\/span>, value:<\/span> 5077.482<\/span> },\r\n    { x:<\/span> \"Cost of revenue\"<\/span>, value:<\/span> -1797.510<\/span> },\r\n    { x:<\/span> \"Gross profit\"<\/span>, isTotal:<\/span> true<\/span> },\r\n    { x:<\/span> \"Operating expenses\"<\/span>, value:<\/span> -3772.711<\/span> },\r\n    { x:<\/span> \"Income (loss) from operations\"<\/span>, isTotal:<\/span> true<\/span> },\r\n    { x:<\/span> \"Interest expense\"<\/span>, value:<\/span> -51.186<\/span> },\r\n    { x:<\/span> \"Interest income\"<\/span>, value:<\/span> 35.683<\/span> },\r\n    { x:<\/span> \"Other income (expense), net\"<\/span>, value:<\/span> 97.129<\/span> },\r\n    { x:<\/span> \"Income (loss) before income taxes\"<\/span>, isTotal:<\/span> true<\/span> },\r\n    { x:<\/span> \"(Provision) benefit for income taxes\"<\/span>, value:<\/span> 189.704<\/span> },\r\n    { x:<\/span> \"Net income (loss)\"<\/span>, isTotal:<\/span> true<\/span> }\r\n  ];\r\n\r\n  \/\/ All the next code for the JS waterfall chart will come here.<\/span>\r\n\r\n});\r\n<\/code><\/pre>\n
    Now that you have your data, create an instance of a waterfall chart. This chart instance will serve as the canvas upon which you'll visualize your data.<\/p>\n
    var<\/span> chart = anychart.waterfall()\r\n<\/code><\/pre>\n
    To add your data to the waterfall chart, create a series object and assign your data to it. The series object is where you define how the data will be represented on the graphic. This step connects your data to the chart and tells it how to display each data point.<\/p>\n
    var series<\/span> = chart.waterfall(data);\r\n<\/code><\/pre>\n
    You may choose to disable data point labels if your values are large and would otherwise clutter the view (all values can still be seen in the tooltip). We will return the labels and customize this and a few other things in the chart later in Section B.<\/p>\n
    series.labels<\/span>(false<\/span>);\r\n<\/code><\/pre>\n
    You\u2019ve set up your JS waterfall chart, but now it needs a home. Set the ID of the container element in your HTML where the visual will be displayed. This makes your chart aware of where it should appear on your webpage.<\/p>\n
    chart.container(\"WaterfallContainer\"<\/span>);<\/span>\r\n<\/code><\/pre>\n
    Finally, with all the pieces in place, issue the command to draw the resulting waterfall chart.<\/p>\n
    chart.draw();<\/span>\r\n<\/code><\/pre>\n
    Initial Waterfall Chart Result<\/h3>\n
    And there you have it! Your basic JavaScript waterfall chart comes to life. The complete code is provided below for your convenience. Feel free to explore the interactive version and play with the code on AnyChart Playground<\/a>, and let\u2019s proceed to customize this waterfall chart visualization in the next section of the tutorial!<\/p>\n
    \"Initial<\/p>\n
    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <title<\/span>><\/span>JavaScript Waterfall Chart<\/title<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-waterfall.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <style<\/span>><\/span>\r\n      html<\/span>, body<\/span>, #WaterfallContainer<\/span> {\r\n        width<\/span>: 100%<\/span>;\r\n        height<\/span>: 100%<\/span>;\r\n        margin<\/span>: 0<\/span>;\r\n        padding<\/span>: 0<\/span>;\r\n      }\r\n    <\/span><\/style<\/span>><\/span>\r\n  <\/head<\/span>><\/span>\r\n  <body<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"WaterfallContainer\"<\/span>><\/span><\/div<\/span>><\/span>\r\n    <script<\/span>><\/span>\r\n      anychart.onDocumentReady(function<\/span> ()<\/span> <\/span>{\r\n        \/\/ set the data<\/span>\r\n        var<\/span> data = [\r\n          { x: \"Revenue\"<\/span>, value: 5077.482<\/span> },\r\n          { x: \"Cost of revenue\"<\/span>, value: -1797.510<\/span> },\r\n          { x: \"Gross profit\"<\/span>, isTotal: true<\/span> },\r\n          { x: \"Operating expenses\"<\/span>, value: -3772.711<\/span> },\r\n          { x: \"Income (loss) from operations\"<\/span>, isTotal: true<\/span> },\r\n          { x: \"Interest expense\"<\/span>, value: -51.186<\/span> },\r\n          { x: \"Interest income\"<\/span>, value: 35.683<\/span> },\r\n          { x: \"Other income (expense), net\"<\/span>, value: 97.129<\/span> },\r\n          { x: \"Income (loss) before income taxes\"<\/span>, isTotal: true<\/span> },\r\n          { x: \"(Provision) benefit for income taxes\"<\/span>, value: 189.704<\/span> },\r\n          { x: \"Net income (loss)\"<\/span>, isTotal: true<\/span> }\r\n];\r\n        \/\/ create a waterfall chart<\/span>\r\n        var<\/span> chart = anychart.waterfall();\r\n        \/\/ create a series and set the data<\/span>\r\n        var<\/span> series = chart.waterfall(data);\r\n        \/\/ hide the labels<\/span>\r\n        series.labels(false<\/span>);\r\n        \/\/ set the container for the chart<\/span>\r\n        chart.container(\"WaterfallContainer\"<\/span>);\r\n        \/\/ draw the resulting chart<\/span>\r\n        chart.draw();\r\n      });\r\n    <\/span><\/script<\/span>><\/span>\r\n  <\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    B. Customizing JS Waterfall Chart<\/h2>\n
    Now, let\u2019s see how you can enhance the visual appeal of the waterfall chart by adding some customizations..<\/p>\n
    1. Add Zero Line Marker<\/h3>\n
    When working with negative values, it can be advantageous to include a zero line marker on the X axis. This zero line acts as a reference point, visually separating positive and negative values. You can achieve this by adding the following code.<\/p>\n
    var<\/span> line = chart.lineMarker().value<\/span>(0<\/span>);\r\n<\/code><\/pre>\n
    \"Customized<\/p>\n
    2. Rotate Chart<\/h3>\n
    In some cases where certain income statement items have lengthy names, you can improve the chart's appearance by rotating the X axis labels, or even the entire chart which is what you can see below. The following change in orientation to a vertical layout provides more space for accommodating extended item names.<\/p>\n
    chart.isVertical(true);<\/span>\r\n<\/code><\/pre>\n
    Additionally, you can arrange the bars in reverse order to enhance the legibility of the waterfall chart.<\/p>\n
    chart<\/span>.xScale<\/span>().inverted<\/span>(true<\/span>);\r\n<\/code><\/pre>\n
    \"Customized<\/p>\n
    3. Configure Labels<\/h3>\n
    Labels play a crucial role in conveying information to viewers. By customizing labels, you can significantly enhance the chart's visual presentation and readability.<\/p>\n
    To start, enable series labels by simply removing the series.labels(false);<\/code> line. Labels are displayed by default unless specified otherwise.<\/p>\n
    Next, for instance, customize the appearance of labels within the chart using HTML as shown below. The formatting logic applied within the corresponding function allows you to apply different styles depending on whether the label represents a total value or a non-total value. Total values are displayed in red with a lighter font weight, while non-total values are shown in gray. Additionally, rounded values (with zero decimal places) are displayed in both cases.<\/p>\n
    chart.labels()\r\n  .useHtml(true<\/span>)\r\n  .format(function() {\r\n    if<\/span> (this<\/span>.isTotal)\r\n      return<\/span> \"<span style='color: #dd2c00; font-weight: 100; font-size: 11'>\"<\/span> +\r\n        this<\/span>.absolute.toFixed(0<\/span>) + \"M\"<\/span> + \"<\/span>\"<\/span>;\r\n      return<\/span> \"<span style='color: gray; font-weight: 100; font-size: 11'>\"<\/span> +\r\n        this<\/span>.diff.toFixed(0<\/span>) + \"M\"<\/span> + \"<\/span>\"<\/span>;\r\n  });\r\n<\/code><\/pre>\n
    \"Customized<\/p>\n
    4. Name Chart<\/h3>\n
    Providing a clear and informative title for your waterfall chart is essential to help users quickly understand what the graphic represents. Here\u2019s how you can name the chart, making it obvious at a glance that it displays the income statement for Twitter Inc. for the year 2021.<\/p>\n
    chart.title(\"Income Statement for Twitter Inc. (2021)\"<\/span>);<\/span>\r\n<\/code><\/pre>\n
    \"Customized<\/p>\n
    5. Customize Value Axis<\/h3>\n
    You can also improve the clarity of the chart by changing the format of the values represented on the value (Y) axis. Specifically, you can name the axis "USD" to denote the currency. Additionally, you can format the values to be more understandable, such as by showing values in billions of USD for larger values, like in this case.<\/p>\n
    \/\/ customize the format of the y-axis labels<\/span>\r\nchart<\/span>.yAxis<\/span>().labels<\/span>().format<\/span>(\"{%Value}{scale:(1000)(1)|(B)}\"<\/span>);\r\n\r\n\/\/ set the y-axis title<\/span>\r\nchart<\/span>.yAxis<\/span>().title<\/span>(\"USD\"<\/span>);\r\n<\/code><\/pre>\n
    \"Customized<\/p>\n
    6. Configure Tooltip<\/h3>\n
    Tooltips provide valuable information to users when interacting with the chart. To make tooltips more direct and precise, you can customize them as you need. In this case, for example, the "M USD" in the tooltip title makes it obvious that values within the tooltip are displayed in millions of USD.<\/p>\n
    chart<\/span>.tooltip<\/span>().titleFormat<\/span>(\"{%x}\"<\/span> + \" (M USD)\"<\/span>);\r\n<\/code><\/pre>\n
    \"Customized<\/p>\n
    7. Configure Visual Appearance<\/h3>\n
    You can also improve the visual appearance by customizing the coloring. For instance, the code below enriches the connectors\u2019 stroke with a vibrant red color and a dashed pattern, making it visually striking.<\/p>\n
    chart<\/span>.connectorStroke<\/span>(\"#ff6666\"<\/span>, 2<\/span>, \"2 2\"<\/span>, \"round\"<\/span>);\r\n<\/code><\/pre>\n
    Furthermore, you can configure the appearance of the bars in different states, including normal, hovered, and selected. Here\u2019s how you can specify distinct visual settings for falling and rising values, tailoring the chart's visual presentation according to your preferences and specific design requirements.<\/p>\n
    \/\/ normal state<\/span>\r\nseries<\/span>.normal<\/span>()\r\n  .fill<\/span>(\"#8C8C8C\"<\/span>, 0.7<\/span>)\r\n  .hatchFill<\/span>(\"forward-diagonal\"<\/span>, \"#BEBEBE\"<\/span>, 1<\/span>, 10<\/span>)\r\n  .stroke<\/span>(\"#8C8C8C\"<\/span>)\r\n  .fallingFill<\/span>(\"#FC4E6F\"<\/span>, 0.8<\/span>)\r\n  .fallingStroke<\/span>(\"#FC4E6F\"<\/span>, 1<\/span>, )\r\n  .risingFill<\/span>(\"#44C882\"<\/span>, 0.8<\/span>)\r\n  .risingStroke<\/span>(\"44C882\"<\/span>);\r\n\/\/ hovered state<\/span>\r\nseries<\/span>.hovered<\/span>()\r\n  .fill<\/span>(\"#8C8C8C\"<\/span>, 0.1<\/span>)\r\n  .hatchFill<\/span>(\"forward-diagonal\"<\/span>, \"#117A65\"<\/span>, 1<\/span>, 10<\/span>)\r\n  .stroke<\/span>(\"#8C8C8C\"<\/span>, 2<\/span>)\r\n  .fallingFill<\/span>(\"#FC4E6F\"<\/span>, 0.1<\/span>)\r\n  .fallingStroke<\/span>(\"#FC4E6F\"<\/span>, 2<\/span>, \"10 5\"<\/span>, )\r\n  .risingFill<\/span>(\"44C882\"<\/span>, 0.1<\/span>)\r\n  .risingStroke<\/span>(\"44C882\"<\/span>, 2<\/span>);\r\n\/\/ selected state<\/span>\r\nseries<\/span>.selected<\/span>()\r\n  .fill<\/span>(\"#8C8C8C\"<\/span>, 0.5<\/span>)\r\n  .hatchFill<\/span>(\"forward-diagonal\"<\/span>, \"#8C8C8C\"<\/span>, 1<\/span>, 10<\/span>)\r\n  .stroke<\/span>(\"#8C8C8C\"<\/span>, 4<\/span>)\r\n  .fallingFill<\/span>(\"#922B21\"<\/span>, 0.5<\/span>)\r\n  .fallingStroke<\/span>(\"#B03A2E\"<\/span>, 4<\/span>, )\r\n  .risingFill<\/span>(\"#117864\"<\/span>, 0.5<\/span>)\r\n  .risingStroke<\/span>(\"#148F77\"<\/span>, 1<\/span>);\r\n<\/code><\/pre>\n
    \"Customized<\/p>\n
    8. Add Arrow to Visualize Total Change<\/h3>\n
    In the final step of this waterfall chart tutorial, I\u2019ll show you how to add an arrow to connect the initial and final values, providing a clear visual representation of the total change. Check it out.<\/p>\n
    \/\/ add an arrow<\/span>\r\nvar totalChangeArrow = chart.addArrow({\r\n  from<\/span>: \"Revenue\"<\/span>,\r\n  to<\/span>: \"Net income (loss)\"<\/span>\r\n});\r\n\r\n\/\/ set arrow's label format<\/span>\r\ntotalChangeArrow.label().format<\/span>(\"{%Value}{numDecimals:0}\"<\/span> + \"M\"<\/span>);\r\n<\/code><\/pre>\n
    Final Result<\/h3>\n
    After implementing these customizations one by one, I am excited to present the final version of the waterfall chart powered by JavaScript. Its sleek design and smooth interactivity make it an exceptional tool for data visualization.<\/p>\n
    \"Final<\/p>\n
    Feel free to access and modify the source code on AnyChart Playground<\/a> to suit your specific needs. Experiment with colors, interactions, and other features to create a chart that perfectly matches your unique style. For your convenience, I have included the entire code of this JS waterfall chart below.<\/p>\n
    <!DOCTYPE html><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <title<\/span>><\/span>JavaScript Waterfall Chart<\/title<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <script<\/span> src<\/span>=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-waterfall.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n    <style<\/span>><\/span>\r\n      html<\/span>, body<\/span>, #WaterfallContainer<\/span> {\r\n        width<\/span>: 100%<\/span>;\r\n        height<\/span>: 100%<\/span>;\r\n        margin<\/span>: 0<\/span>;\r\n        padding<\/span>: 0<\/span>;\r\n      }\r\n    <\/span><\/style<\/span>><\/span>\r\n  <\/head<\/span>><\/span>\r\n  <body<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"WaterfallContainer\"<\/span>><\/span><\/div<\/span>><\/span>\r\n    <script<\/span>><\/span>\r\n      anychart.onDocumentReady(function<\/span> ()<\/span> <\/span>{\r\n        \/\/ set the data<\/span>\r\n        var<\/span> data = [\r\n          { x: \"Revenue\"<\/span>, value: 5077.482<\/span> },\r\n          { x: \"Cost of revenue\"<\/span>, value: -1797.510<\/span> },\r\n          { x: \"Gross profit\"<\/span>, isTotal: true<\/span> },\r\n          { x: \"Operating expenses\"<\/span>, value: -3772.711<\/span> },\r\n          { x: \"Income (loss) from operations\"<\/span>, isTotal: true<\/span> },\r\n          { x: \"Interest expense\"<\/span>, value: -51.186<\/span> },\r\n          { x: \"Interest income\"<\/span>, value: 35.683<\/span> },\r\n          { x: \"Other income (expense), net\"<\/span>, value: 97.129<\/span> },\r\n          { x: \"Income (loss) before income taxes\"<\/span>, isTotal: true<\/span> },\r\n          { x: \"(Provision) benefit for income taxes\"<\/span>, value: 189.704<\/span> },\r\n          { x: \"Net income (loss)\"<\/span>, isTotal: true<\/span> }\r\n        ];\r\n        \/\/ create a waterfall chart<\/span>\r\n        var<\/span> chart = anychart.waterfall();\r\n        \/\/ add the zero line<\/span>\r\n        var<\/span> line = chart.lineMarker().value(0<\/span>);\r\n        \/\/ rotate the chart<\/span>\r\n        chart.isVertical(true<\/span>);\r\n        \/\/ set the reverse order of the bars<\/span>\r\n        chart.xScale().inverted(true<\/span>);\r\n        \/\/ customize the labels<\/span>\r\n        chart.labels()\r\n          .useHtml(true<\/span>)\r\n          .format(function<\/span>()<\/span> <\/span>{\r\n            if<\/span> (this<\/span>.isTotal)\r\n              return<\/span> \"<span style='color: #dd2c00; font-weight: 100; font-size: 11'>\"<\/span> +\r\n                this<\/span>.absolute.toFixed(0<\/span>) + \"M\"<\/span> + \"<\/span>\"<\/span>;\r\n              return<\/span> \"<span style='color: gray; font-weight: 100; font-size: 11'>\"<\/span> +\r\n                this<\/span>.diff.toFixed(0<\/span>) + \"M\"<\/span> + \"<\/span>\"<\/span>;\r\n          });\r\n        \/\/ set the chart title<\/span>\r\n        chart.title(\"Income Statement for Twitter Inc. (2021)\"<\/span>);\r\n        \/\/ add the usd caption on the y-axis labels<\/span>\r\n        chart.yAxis().labels().format(\"{%Value}{scale:(1000)(1)|(B)}\"<\/span>);\r\n        \/\/ set the y-axis title<\/span>\r\n        chart.yAxis().title(\"USD\"<\/span>);\r\n        \/\/ create a series and set the data<\/span>\r\n        var<\/span> series = chart.waterfall(data);\r\n        \/\/ configure the tooltip title<\/span>\r\n        chart.tooltip().titleFormat(\"{%x}\"<\/span> + \" (M USD)\"<\/span>);\r\n        \/\/ customize the connector stroke<\/span>\r\n        chart.connectorStroke(\"#ff6666\"<\/span>, 2<\/span>, \"2 2\"<\/span>, \"round\"<\/span>);\r\n        \/\/ configure the visual settings of the series:<\/span>\r\n        \/\/ normal state<\/span>\r\n        series.normal()\r\n          .fill(\"#8C8C8C\"<\/span>, 0.7<\/span>)\r\n          .hatchFill(\"forward-diagonal\"<\/span>, \"#BEBEBE\"<\/span>, 1<\/span>, 10<\/span>)\r\n          .stroke(\"#8C8C8C\"<\/span>)\r\n          .fallingFill(\"#FC4E6F\"<\/span>, 0.8<\/span>)\r\n          .fallingStroke(\"#FC4E6F\"<\/span>, 1<\/span>, )\r\n          .risingFill(\"#44C882\"<\/span>, 0.8<\/span>)\r\n          .risingStroke(\"44C882\"<\/span>);\r\n        \/\/ hovered state<\/span>\r\n        series.hovered()\r\n          .fill(\"#8C8C8C\"<\/span>, 0.1<\/span>)\r\n          .hatchFill(\"forward-diagonal\"<\/span>, \"#117A65\"<\/span>, 1<\/span>, 10<\/span>)\r\n          .stroke(\"#8C8C8C\"<\/span>, 2<\/span>)\r\n          .fallingFill(\"#FC4E6F\"<\/span>, 0.1<\/span>)\r\n          .fallingStroke(\"#FC4E6F\"<\/span>, 2<\/span>, \"10 5\"<\/span>, )\r\n          .risingFill(\"44C882\"<\/span>, 0.1<\/span>)\r\n          .risingStroke(\"44C882\"<\/span>, 2<\/span>);\r\n        \/\/ selected state<\/span>\r\n        series.selected()\r\n          .fill(\"#8C8C8C\"<\/span>, 0.5<\/span>)\r\n          .hatchFill(\"forward-diagonal\"<\/span>, \"#8C8C8C\"<\/span>, 1<\/span>, 10<\/span>)\r\n          .stroke(\"#8C8C8C\"<\/span>, 4<\/span>)\r\n          .fallingFill(\"#922B21\"<\/span>, 0.5<\/span>)\r\n          .fallingStroke(\"#B03A2E\"<\/span>, 4<\/span>, )\r\n          .risingFill(\"#117864\"<\/span>, 0.5<\/span>)\r\n          .risingStroke(\"#148F77\"<\/span>, 1<\/span>);\r\n        \/\/ add an arrow<\/span>\r\n        var<\/span> totalChangeArrow = chart.addArrow({\r\n          from: \"Revenue\"<\/span>,\r\n          to: \"Net income (loss)\"<\/span>\r\n        });\r\n        \/\/ set arrow's label format<\/span>\r\n        totalChangeArrow.label().format(\"{%Value}{numDecimals:0}\"<\/span> + \"M\"<\/span>);\r\n        \/\/ set the container id for the waterfall chart<\/span>\r\n        chart.container(\"WaterfallContainer\"<\/span>);\r\n        \/\/ draw the resulting chart<\/span>\r\n        chart.draw();\r\n      });\r\n    <\/span><\/script<\/span>><\/span>\r\n  <\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
    Conclusion<\/h2>\n
    This tutorial was designed to be a comprehensive and user-friendly guide to ensure you can effortlessly create waterfall charts using JavaScript (HTML5). I hope we've succeeded in that endeavor.<\/p>\n
    If you have any questions or require further assistance, please don't hesitate to ask in the comments section. I'm here to help and will do my best to address any doubts you may have. I'm eagerly looking forward to the fantastic waterfall charts you'll create using this guide, so feel free to share your creative visualizations. For inspiration, you can take a look at this waterfall chart gallery<\/a> and learn more in the waterfall chart documentation<\/a>. And your contributions can be a source of further inspiration for others, including myself.<\/p>\n
    Happy charting!<\/p>\n
    \n
    Published with the permission of Awan Shrestha. Originally appeared on DEV Community<\/a> under the title “How to Build a Waterfall Chart with JavaScript” on November 1, 2023.<\/p>\n
    You might also be interested in reading the JavaScript Waterfall Chart Tutorial<\/a> specifically produced by Dilhani Withanage for our blog earlier, visualizing the 2020 income statement for Alphabet Inc. (GOOGL) step by step.<\/p>\n
    Delve into other JavaScript charting tutorials<\/a> and continue honing your skills in interactive data visualization.<\/p>\n
    If you’re interested in contributing a guest post to our blog, please don’t hesitate to contact us<\/a>.<\/strong><\/em><\/p>\n
    \n