All Components

Waterfall

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

For more information, refer to the article in Wikipedia.

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