Waterfall Charts in JavaScript

How to make a D3.js-based waterfall chart in javascript.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Basic Waterfall Chart

var data = [
        {
            name: "2018",
            type: "waterfall",
            orientation: "v",
            measure: [
                "relative",
                "relative",
                "total",
                "relative",
                "relative",
                "total"
            ],
            x: [
                "Sales",
                "Consulting",
                "Net revenue",
                "Purchases",
                "Other expenses",
                "Profit before tax"
            ],
            textposition: "outside",
            text: [
                "+60",
                "+80",
                "",
                "-40",
                "-20",
                "Total"
            ],          
            y: [
                60,
                80,
                0,
                -40,
                -20,
                0
            ],
            connector: {
              line: {
                color: "rgb(63, 63, 63)"
              }
            },
        }
    ];
 layout = {
        title: {
            text: "Profit and loss statement 2018"
        },
        xaxis: {
            type: "category"
        },
        yaxis: {
            type: "linear"
        },
        autosize: true,
        showlegend: true
    };
Plotly.newPlot('myDiv', data, layout);

Multi Category Waterfall Chart

var gd = document.getElementById('myDiv');
var data = [
    {
      type: "waterfall",
      x: [
        ["2016", "2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
        ["initial", "q1", "q2", "q3", "total", "q1", "q2", "q3", "total" ]
      ],
      measure: ["absolute", "relative", "relative", "relative", "total", "relative", "relative", "relative", "total"],
      y: [1, 2, 3, -1, null, 1, 2, -4, null],
      base: 1000
    },
    {
      type: "waterfall",
      x: [
        ["2016", "2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
        ["initial", "q1", "q2", "q3", "total", "q1", "q2", "q3", "total" ]
      ],
      measure: ["absolute", "relative", "relative", "relative", "total", "relative", "relative", "relative", "total"],
      y: [1.1, 2.2, 3.3, -1.1, null, 1.1, 2.2, -4.4, null],
      base: 1000
    }
  ];
var layout = {
    waterfallgroupgap : 0.5,
    xaxis: {
      title: {
        text: "MULTI-CATEGORY",
      },
      tickfont: {size: 16},
      ticks: "outside"
    }
  }
Plotly.newPlot('myDiv', data, layout);

Horizontal Waterfall Chart

var gd = document.getElementById('myDiv');
var data = [
        {
            name: "2018",
            type: "waterfall",
            orientation: "h",
            measure: [
                "relative",
                "relative",
                "relative",
                "relative",
                "total",
                "relative",
                "relative",
                "relative",
                "relative",
                "total",
                "relative",
                "relative",
                "total",
                "relative",
                "total"
            ],
            y: [
                "Sales",
                "Consulting",
                "Maintenance",
                "Other revenue",
                "Net revenue",
                "Purchases",
                "Material expenses",
                "Personnel expenses",
                "Other expenses",
                "Operating profit",
                "Investment income",
                "Financial income",
                "Profit before tax",
                "Income tax (15%)",
                "Profit after tax"
            ],
            x: [
                375,
                128,
                78,
                27,
                null,
                -327,
                -12,
                -78,
                -12,
                null,
                32,
                89,
                null,
                -45,
                null
            ],
            connector: {
                mode: "between",
                line: {
                    width: 4,
                    color: "rgb(0, 0, 0)",
                    dash: 0
                }
            }
        }
    ];
var layout = {title: {
            text: "Profit and loss statement 2018<br>waterfall chart displaying positive and negative"
        },
        yaxis: {
            type: "category",
            autorange: "reversed"
        },
        xaxis: {
            type: "linear"
        },
        margin: { l: 150 },
        showlegend: true
    }
Plotly.newPlot('myDiv', data, layout);

Style Waterfall Chart

var gd = document.getElementById('myDiv');
var data = [
    {
      type: "waterfall",
      x: [
        ["2016", "2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
        ["initial", "q1", "q2", "q3", "total", "q1", "q2", "q3", "total" ]
      ],
      measure: ["absolute", "relative", "relative", "relative", "total", "relative", "relative", "relative", "total"],
      y: [10, 20, 30, -10, null, 10, 20, -40, null],
      base: 300,
    decreasing: { marker: { color: "Maroon" , line:{color : "red", width :2}}},
    increasing: { marker: { color: "Teal"} },
    totals: { marker: { color: "deep sky blue", line:{color:'blue',width:3}} }
    }];
var layout = {title: {
            text: "Profit and loss statement"
        },
    waterfallgap : 0.3,
    xaxis: {
      title: { text: ""},
      tickfont: {size: 15},
      ticks: "outside"
    }
  }
Plotly.newPlot('myDiv', data, layout);