Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Vote for your favorite vizzies from the Power BI Dataviz World Championship submissions. Vote now!

Reply
majid154a
Advocate I
Advocate I

waterfall by deneb

Hello,

The community helped me create a waterfall chart using DAX at the following link:
https://community.fabric.microsoft.com/t5/Desktop/Waterfall-Challenge/m-p/4942137#M1456881

The data I’m using is as follows:

index cat value
1Budget NPAT4,261,532
2Gross Margin2,733,696
3Variable Costs-280,573
43rd Party Cost Recovery-435,951
5Other Income32,571
6Fixed Costs1,324,187
7Support Cost738,378
8Depreciation-664,124
9Bad Debt Provision799,823
10Finance Exp & Inc-1,537,797
11Income Tax-637,201
12Actual NPAT6,334,541

The challenges I’m facing:

  1. I want the data labels to appear above the boxes.

  2. Can the Actual NPAT start from zero? It’s very high as shown in the attached image.

     
     

     

     

     

  3.   want to set the color of Actual NPAT to #A4D233 and the color of Budget NPAT to #389BBD.

1 REPLY 1
Olufemi7
Solution Supplier
Solution Supplier

Hi @majid154a,

Since you’re using Deneb (Vega-Lite), all three requirements can be handled directly in the JSON spec.

1.  Show data labels above the bars

Add a text layer and shift it upward using dy:

{
  "mark": {
    "type": "text",
    "dy": -10,
    "fontWeight": "bold"
  },
  "encoding": {
    "text": {"field": "value", "type": "quantitative"},
    "color": {"value": "black"}
  }
}

 

If labels are still inside the bars, increase the negative dy (e.g., -12 or -15).
 2. Make “Actual NPAT” start from zero

Override the starting position for that category using a calculated field:

{
  "calculate": "datum.cat === 'Actual NPAT' ? 0 : datum.StartValue",
  "as": "AdjustedStart"
}


Then use:

"y":  {"field": "AdjustedStart"},
"y2": {"field": "EndValue"}


This forces Actual NPAT (Net Profit After Tax) to behave as a total bar starting from zero instead of continuing the running total.

 

3. Set custom colors

Use conditional color encoding:

"color": {
  "condition": [
    {
      "test": "datum.cat === 'Actual NPAT'",
      "value": "#A4D233"
    },
    {
      "test": "datum.cat === 'Budget NPAT'",
      "value": "#389BBD"
    }
  ],
  "value": "#D3D3D3"
}

 

 

  • Actual NPAT → #A4D233

  • Budget NPAT → #389BBD

Others → default gray

Summary Use a text layer with negative dy for labels above bars Override the start value for Actual NPAT with a calculate transform Apply conditional color encoding for category-specific colors That should resolve all three requirements cleanly within Deneb.



 

Helpful resources

Announcements
Power BI DataViz World Championships

Power BI Dataviz World Championships

Vote for your favorite vizzies from the Power BI World Championship submissions!

Sticker Challenge 2026 Carousel

Join our Community Sticker Challenge 2026

If you love stickers, then you will definitely want to check out our Community Sticker Challenge!

January Power BI Update Carousel

Power BI Monthly Update - January 2026

Check out the January 2026 Power BI update to learn about new features.

FabCon Atlanta 2026 carousel

FabCon Atlanta 2026

Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.

Top Solution Authors