We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Creating stacked waterfall chart using Blazor bar chart

Platform: Blazor |
Control: Charts

This article explains how to create stacked waterfall chart using Blazor Bar Chart component.

You can achieve a stacked waterfall chart using stacked bar series chart by adding one additional invisible series that will push the other two series to give the look of stacked water fall chart

Create a simple stacked bar chart with additional invisible series that will push the other two   series to give the look of stacked water fall chart.

Index.razor

@using Syncfusion.Blazor.Charts
<SfChart>
  <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
     <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
     <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
  </ChartPrimaryXAxis>
  <ChartPrimaryYAxis>
      <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
      <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
  </ChartPrimaryYAxis>
  <ChartSeriesCollection>
     <ChartSeries DataSource="@MedalDetails" XName="X" YName="baseline" Type="ChartSeriesType.StackingBar" Fill="#FFFFFF">
     </ChartSeries>
     <ChartSeries DataSource="@MedalDetails" XName="X" YName="y1" Type="ChartSeriesType.StackingBar" Fill="#fa4a00">
     </ChartSeries>
     <ChartSeries DataSource="@MedalDetails" XName="X" YName="y2" Type="ChartSeriesType.StackingBar" Fill="#000095">
     </ChartSeries>
   </ChartSeriesCollection>
</SfChart>
 
@code{
    
    public class ChartData
    {
        public string X { get; set; }
        public double baseline { get; set; }
        public double y1 { get; set; }
        public double y2 { get; set; }
    }
 public List<ChartData> MedalDetails = new List<ChartData>
    {
        new ChartData { baseline= 0,X= "Total",y1=190, y2=12},
        new ChartData { baseline= 180,X= "Otros",y1=11, y2=10},
        new ChartData { baseline= 180,X= "Expert Monitoring",y1=31, y2=0},
        new ChartData { baseline= 195,X= "Liquidacion Nacional",y1=16, y2=0},
        new ChartData { baseline= 178,X= "Autorizacion Nacional",y1=17, y2=0},
        new ChartData { baseline= 155,X= "Cuentas & Tarjetas",y1=23, y2=0},
        new ChartData { baseline= 116,X= "Decision Intelligence",y1=39, y2=0},
        new ChartData { baseline= 0,X= "Ventas",y1=100, y2=16},
    };
}

 

The following screenshot illustrates the result of stacked waterfall chart achieved by using stacked bar chart.

stacked waterfall chart

View sample in GitHub

 

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile