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';
}
}
}