Waterfall

Waterfall Charts are Categorical charts which display the cumulative effect of sequentially introduced positive or negative values.

Basic Usage

The following example demonstrates the Waterfall Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Inventory'"
                 :legend-visible="false"
                 :series="series"
                 :category-axis-categories="categories"
                 :category-axis-labels-rotation="'auto'"
                 :axis-defaults-major-grid-lines-visible="false"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            area: {
                line: {
                    style: 'smooth'
                }
            },
            series: [{
                type: 'waterfall',
                data: [180, -60, -20, 10, 30],
                labels: {
                    visible: true
                }
            }],
            categories: [
                'In stock',
                'Damaged',
                'Reserved',
                'In transit',
                'Refurbished'
            ]
        }
    }
})

Horizontal Waterfall

A Horizontal Waterfall chart type shows the cumulative effect of positive or negative values on the starting point. You can use it to provide a better understanding of how an initial amount is influenced by subsequently added positive or negative values. A Horizontal Waterfall chart is useful for different types of quantitative analysis related to inventory, cash flows, performance, etc. This chart type looks like a Range Bar chart where the low or high value of a subsequent item is connected to the preceding one with a thin line.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :data-source="requestData"
                 :title-text="'Request latency breakdown'"
                 :legend-visible="false"
                 :axis-defaults-major-grid-lines-visible="false"
                 :value-axis-labels-format="'{0} ms'"
                 :theme="'sass'">
        <kendo-chart-series-item :type="'horizontalWaterfall'"
                                 :field="'elapsed'"
                                 :category-field="'caption'"
                                 :summary-field="'summary'"
                                 :color="color">
        </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            palette: [
                "#95c3cd", "#abc75b", "#c6816f", "#968cb2", "#c0c0c0", "#2ba6ff"
            ],
            requestData: [{
                caption: "DNS Lookup",
                elapsed: 20
            }, {
                caption: "Connecting",
                elapsed: 122
            }, {
                caption: "Sending",
                elapsed: 30
            }, {
                caption: "Waiting",
                elapsed: 421
            }, {
                caption: "Receiving",
                elapsed: 357
            }, {
                caption: "Total",
                summary: "total"
            }]
        }
    },
    methods: {
        color: function(point) {
            return this.palette[point.index % this.palette.length];
        }
    }
})

In this article