Waterfall Chart in Angular Charts

Waterfall Chart

A waterfall chart shows how an initial value changes step-by-step through additions and subtractions. It helps visualize running totals, such as profit breakdowns or budget changes.

Waterfall chart showing cumulative changes

Configure a waterfall series as follows:

  1. Set the series type: Define the series type as Waterfall in your chart configuration. The waterfall series illustrates the cumulative effect of sequentially introduced positive and negative values.
  2. Register the service: Register WaterfallSeriesService (and any required axis services) in the module providers array, or in ApplicationConfig.providers for standalone applications. Confirm that ChartModule is imported.
  3. Configure sums and bind data: Bind data with dataSource, map the fields with xName and yName, and configure intermediateSumIndexes and sumIndexes to mark intermediate and cumulative totals.
import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;

    ngOnInit(): void {
        this.data = [
            { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
            { x: 'Development', y: -688 },
            { x: 'Revenue', y: 1030 }, {x: 'Balance'},
            { x: 'Administrative', y: -780 },
            { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
            { x: 'Net Profit'}
            ];
        this.primaryXAxis = {
            majorGridLines: {width: 0},
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            majorGridLines: {width: 0},
            lineStyle: { width: 0},
            majorTickLines: { width: 0}
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
            { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
            { x: 'Development', y: -688 },
            { x: 'Revenue', y: 1030 }, {x: 'Balance'},
            { x: 'Administrative', y: -780 },
            { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
            { x: 'Net Profit'}
            ];

Series customization

Customize a waterfall series using the following properties.

Negative and summary colors

Use negativeFillColor to color negative (downward) changes, and summaryFillColor to color summary totals. By default, negativeFillColor is #C64E4A and summaryFillColor is #4E81BC.

import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { waterfallData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' summaryFillColor='#e56590' negativeFillColor='#f8b883' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;

    ngOnInit(): void {
        this.data = waterfallData;
        this.primaryXAxis = {
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
            { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
            { x: 'Development', y: -688 },
            { x: 'Revenue', y: 1030 }, {x: 'Balance'},
            { x: 'Administrative', y: -780 },
            { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
            { x: 'Net Profit'}
            ];

Corner radius

Use cornerRadius to round the corners of every waterfall bar. Configure each corner individually with the topLeft, topRight, bottomLeft, and bottomRight properties.

this.cornerRadius = { topLeft: 8, topRight: 8, bottomLeft: 0, bottomRight: 0 };
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { waterfallData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' summaryFillColor='#e56590' negativeFillColor='#f8b883' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker' [cornerRadius]='cornerRadius'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;
    public cornerRadius?: Object;
    ngOnInit(): void {
        this.data = waterfallData;
        this.primaryXAxis = {
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.cornerRadius = { topRight: 10, topLeft: 10 };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
    }
    public seriesRender(args: ISeriesRenderEventArgs): void {
        args.fill = '#ff6347';
        args.series.negativeFillColor = '#ff6347';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
    { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
    { x: 'Development', y: -688 },
    { x: 'Revenue', y: 1030 }, {x: 'Balance'},
    { x: 'Administrative', y: -780 },
    { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
    { x: 'Net Profit'}
    ];

Empty points

A data point whose mapped value is null or undefined is empty. Configure its behavior with emptyPointSettings.mode.

Mode

Use mode to control empty-point rendering. The default is Gap.

Mode Visual behavior
Gap Skip the empty point; subsequent bars are still rendered.
Zero Treat the empty point as 0 and render a flat bar.
Drop Drop the empty bar; subsequent points are still rendered.
Average Replace the empty value with the average of the surrounding points. 
import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { waterfallData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' summaryFillColor='#e56590' negativeFillColor='#f8b883' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;
    public emptyPointSettings?: Object;
    ngOnInit(): void {
        this.data = waterfallData;
        this.primaryXAxis = {
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
        this.emptyPointSettings = {
            mode: 'Average'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
    { x: 'Income', y: 4711 },
    { x: 'Sales', y: -1015 },
    { x: 'Development', y: -688 },
    { x: 'Revenue', y: null },
    { x: 'Balance' },
    { x: 'Administrative', y: -780 },
    { x: 'Expense', y: -361 },
    { x: 'Tax', y: -695 },
    { x: 'Net Profit' }
];

Empty-point fill

Use emptyPointSettings.fill to customize the fill color of empty-point bars.

import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { waterfallData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' summaryFillColor='#e56590' negativeFillColor='#f8b883' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;
    public emptyPointSettings?: Object;
    ngOnInit(): void {
        this.data = waterfallData;
        this.primaryXAxis = {
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
        this.emptyPointSettings = {
            mode: 'Average',
            fill: 'red'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
    { x: 'Income', y: 4711 },
    { x: 'Sales', y: -1015 },
    { x: 'Development', y: -688 },
    { x: 'Revenue', y: null },
    { x: 'Balance' },
    { x: 'Administrative', y: -780 },
    { x: 'Expense', y: -361 },
    { x: 'Tax', y: -695 },
    { x: 'Net Profit' }
];

Empty-point border

Use border to customize the width and color of the border for empty-point bars.

import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { waterfallData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' summaryFillColor='#e56590' negativeFillColor='#f8b883' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;
    public emptyPointSettings?: Object;
    ngOnInit(): void {
        this.data = waterfallData;
        this.primaryXAxis = {
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
        this.emptyPointSettings = {
            mode: 'Average',
            fill: 'red',
            border: { width: 2, color: 'green' }
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
    { x: 'Income', y: 4711 },
    { x: 'Sales', y: -1015 },
    { x: 'Development', y: -688 },
    { x: 'Revenue', y: null },
    { x: 'Balance' },
    { x: 'Administrative', y: -780 },
    { x: 'Expense', y: -361 },
    { x: 'Tax', y: -695 },
    { x: 'Net Profit' }
];

Events

Series render

The seriesRender event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart. The callback receives an ISeriesRenderEventArgs argument that exposes mutable series and data properties.

<ejs-chart (seriesRender)="onSeriesRender($event)"></ejs-chart>
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { waterfallData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' summaryFillColor='#e56590' negativeFillColor='#f8b883' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;
    ngOnInit(): void {
        this.data = waterfallData;
        this.primaryXAxis = {
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
    }
    public seriesRender(args: ISeriesRenderEventArgs): void {
        args.fill = '#ff6347';
        args.series.negativeFillColor = '#ff6347';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
    { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
    { x: 'Development', y: -688 },
    { x: 'Revenue', y: 1030 }, {x: 'Balance'},
    { x: 'Administrative', y: -780 },
    { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
    { x: 'Net Profit'}
    ];

Point render

The pointRender event allows you to customize each data point before it is rendered on the chart. The callback receives an IPointRenderEventArgs argument that exposes the current point, series, fill, and border, plus a cancel flag. You can also use this event for per-point corner radius.

<ejs-chart (pointRender)="onPointRender($event)"></ejs-chart>
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { waterfallData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' summaryFillColor='#e56590' negativeFillColor='#f8b883' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;
    ngOnInit(): void {
        this.data = waterfallData;
        this.primaryXAxis = {
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
    }
    public pointRender(args: IPointRenderEventArgs): void {
        args.fill = '#ff6347';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
    { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
    { x: 'Development', y: -688 },
    { x: 'Revenue', y: 1030 }, {x: 'Balance'},
    { x: 'Administrative', y: -780 },
    { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
    { x: 'Net Profit'}
    ];

Point corner radius

Use the pointRender event to apply cornerRadius for individual points. This is useful when only certain points (for example, summary bars) should have rounded corners.

import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
import { ChartModule, CategoryService, WaterfallSeriesService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { waterfallData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, WaterfallSeriesService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Waterfall' xName='x' yName='y' name='USA' [columnWidth]='columnWidth' summaryFillColor='#e56590' negativeFillColor='#f8b883' [connector]='connector' [intermediateSumIndexes]='intermediate' [sumIndexes]='sum' [marker]='marker' (pointRender)='pointRender($event)'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public marker?: Object;
    public connector?: Object;
    public sum: number[] = [8];
    public intermediate: number[] = [4, 7];
    public columnWidth: number = 0.6;
    ngOnInit(): void {
        this.data = waterfallData;
        this.primaryXAxis = {
            valueType: 'Category',
            };
        this.primaryYAxis = {
            labelFormat: '${value}M',
            minimum: 0, maximum: 5500, interval: 500,
            };
        this.marker = {
            dataLabel: { visible: true, position: 'Outer' }
            };
        this.connector = { color: '#5F6A6A', width: 1.5 };
        this.title = 'Company Revenue and Profit';
    }
    public pointRender(args: IPointRenderEventArgs): void {
        if (args.point.index === 0 || args.point.index === 3 || args.point.index === 4 || args.point.index === 6) {
            args.cornerRadius = { topLeft: 10, bottomLeft: 0, topRight: 10, bottomRight: 0 };
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let waterfallData: Object[] = [
    { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
    { x: 'Development', y: -688 },
    { x: 'Revenue', y: 1030 }, {x: 'Balance'},
    { x: 'Administrative', y: -780 },
    { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
    { x: 'Net Profit'}
    ];

Troubleshooting

The following symptoms map to the most common configuration issues.

  • Bars do not render as waterfall steps: Confirm that WaterfallSeriesService is registered, the series type is Waterfall, and that intermediateSumIndexes and sumIndexes reference valid indexes in data.
  • All bars use the same color: Verify that negativeFillColor and summaryFillColor are set and that the data includes at least one negative value.
  • Empty-point styling is not applied: Confirm that [emptyPointSettings]='emptyPointSettings' is bound on the <e-series> element and that mode, fill, and border are configured.
  • Corner radius has no effect: Confirm that [cornerRadius]='cornerRadius' is bound on <e-series> (not on <ejs-chart>) and that the property names match topLeft, topRight, bottomLeft, and bottomRight.

See also