waterfall by deneb

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.