All Components

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