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.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [title]="{ text: 'Cash flow' }">
      <kendo-chart-series>
        <kendo-chart-series-item type="waterfall"
                                 [data]="cashFlowData" [color]="pointColor"
                                 field="amount" categoryField="period" summaryField="summary">
          <kendo-chart-series-item-labels format="C0" position="insideEnd">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-value-axis>
          <kendo-chart-value-axis-item [labels]="{ format: 'C0' }">
          </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
    </kendo-chart>
  `
})
export class AppComponent {
  public cashFlowData = [{
    period: 'Beginning\\nBalance',
    amount: 50000
  }, {
    period: 'Jan',
    amount: 17000
  }, {
    period: 'Feb',
    amount: 14000
  }, {
    period: 'Mar',
    amount: -12000
  }, {
    period: 'Q1',
    summary: 'runningTotal'
  }, {
    period: 'Apr',
    amount: -22000
  }, {
    period: 'May',
    amount: -18000
  }, {
    period: 'Jun',
    amount: 10000
  }, {
    period: 'Q2',
    summary: 'runningTotal'
  }, {
    period: 'Ending\\nBalance',
    summary: 'total'
  }];

  public pointColor(point: any): string {
    var summary = point.dataItem.summary;
    if (summary) {
      return summary == 'total' ? '#555' : 'gray';
    }

    if (point.value > 0) {
      return 'green';
    } else {
      return 'red';
    }
  }
}

In this article