<TelerikChart Width="100%"
              Height="400px">
    <ChartTitle Text="Cash Flow"></ChartTitle>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Waterfall"
                     Data="@ChartData"
                     ColorField="@nameof(CashFlowData.Color)"
                     Field="@nameof(CashFlowData.Amount)"
                     CategoryField="@nameof(CashFlowData.Period)"
                     SummaryField="@nameof(CashFlowData.Summary)"
                     DrilldownField="@nameof(CashFlowData.Details)">
            <ChartSeriesLabels Visible="true"
                               Format="C0"
                               Position="@ChartSeriesLabelsPosition.InsideEnd" />
        </ChartSeries>
    </ChartSeriesItems>
    <ChartValueAxes>
        <ChartValueAxis Type="ChartValueAxisType.Numeric">
            <ChartValueAxisLabels Format="C0" />
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>

@code {
    private CashFlowData[] ChartData { get; set; }

    protected override Task OnInitializedAsync()
    {
        ChartData = GetWaterfallData();

        return base.OnInitializedAsync();
    }

    private CashFlowData[] GetWaterfallData()
    {
        return new CashFlowData[] {
            new CashFlowData
            {
                Period = "Beginning\nBalance",
                Amount = 50000,
                Color = "green",
                Details = new ChartSeriesDescriptor()
                {
                    Name = "First Details",
                    Type = ChartSeriesType.Column,
                    Field = nameof(CashFlowDataInner.Sales),
                    CategoryField = nameof(CashFlowDataInner.Name),
                    Data = new List<CashFlowDataInner>()
                    {
                        new CashFlowDataInner() { Name = "Name 1", Sales = 30M },
                        new CashFlowDataInner() { Name = "Name 2", Sales = 20M }
                    }
                }
            },
            new CashFlowData
            {
                Period = "Jan",
                Amount = 17000,
                Color = "green",
                Details = new ChartSeriesDescriptor()
                {
                    Name = "Second Details",
                    Type = ChartSeriesType.Column,
                    Field = nameof(CashFlowDataInner.Sales),
                    CategoryField = nameof(CashFlowDataInner.Name),
                    Data = new List<CashFlowDataInner>()
                    {
                        new CashFlowDataInner() { Name = "Name 3", Sales = 50M },
                        new CashFlowDataInner() { Name = "Name 4", Sales = 40M }
                    }
                }
            },
            new CashFlowData
            {
                Period = "Feb",
                Amount = 14000,
                Color = "green",
                Details = new ChartSeriesDescriptor()
                {
                    Name = "Third Details",
                    Type = ChartSeriesType.Column,
                    Field = nameof(CashFlowDataInner.Sales),
                    CategoryField = nameof(CashFlowDataInner.Name),
                    Data = new List<CashFlowDataInner>()
                    {
                        new CashFlowDataInner() { Name = "Name 5", Sales = 70M },
                        new CashFlowDataInner() { Name = "Name 6", Sales = 60M }
                    }
                }
            }
        };
    }

    private class CashFlowData
    {
        public string Period { get; set; }
        public decimal? Amount { get; set; }
        public string Summary { get; set; }
        public string Color { get; set; }
        public ChartSeriesDescriptor Details { get; set; }
    }

    public class CashFlowDataInner
    {
        public string Name { get; set; }
        public decimal Sales { get; set; }
    }
}