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. Try Plotly Studio 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);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var data = [\n {\n name: \"2018\",\n type: \"waterfall\",\n orientation: \"v\",\n measure: [\n \"relative\",\n \"relative\",\n \"total\",\n \"relative\",\n \"relative\",\n \"total\"\n ],\n x: [\n \"Sales\",\n \"Consulting\",\n \"Net revenue\",\n \"Purchases\",\n \"Other expenses\",\n \"Profit before tax\"\n ],\n textposition: \"outside\",\n text: [\n \"+60\",\n \"+80\",\n \"\",\n \"-40\",\n \"-20\",\n \"Total\"\n ], \n y: [\n 60,\n 80,\n 0,\n -40,\n -20,\n 0\n ],\n connector: {\n line: {\n color: \"rgb(63, 63, 63)\"\n }\n },\n }\n ];\n layout = {\n title: {\n text: \"Profit and loss statement 2018\"\n },\n xaxis: {\n type: \"category\"\n },\n yaxis: {\n type: \"linear\"\n },\n autosize: true,\n showlegend: true\n };\nPlotly.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);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var gd = document.getElementById('myDiv');\nvar data = [\n {\n type: \"waterfall\",\n x: [\n [\"2016\", \"2017\", \"2017\", \"2017\", \"2017\", \"2018\", \"2018\", \"2018\", \"2018\"],\n [\"initial\", \"q1\", \"q2\", \"q3\", \"total\", \"q1\", \"q2\", \"q3\", \"total\" ]\n ],\n measure: [\"absolute\", \"relative\", \"relative\", \"relative\", \"total\", \"relative\", \"relative\", \"relative\", \"total\"],\n y: [1, 2, 3, -1, null, 1, 2, -4, null],\n base: 1000\n },\n {\n type: \"waterfall\",\n x: [\n [\"2016\", \"2017\", \"2017\", \"2017\", \"2017\", \"2018\", \"2018\", \"2018\", \"2018\"],\n [\"initial\", \"q1\", \"q2\", \"q3\", \"total\", \"q1\", \"q2\", \"q3\", \"total\" ]\n ],\n measure: [\"absolute\", \"relative\", \"relative\", \"relative\", \"total\", \"relative\", \"relative\", \"relative\", \"total\"],\n y: [1.1, 2.2, 3.3, -1.1, null, 1.1, 2.2, -4.4, null],\n base: 1000\n }\n ];\nvar layout = {\n waterfallgroupgap : 0.5,\n xaxis: {\n title: {\n text: \"MULTI-CATEGORY\",\n },\n tickfont: {size: 16},\n ticks: \"outside\"\n }\n }\nPlotly.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);

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

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);

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