Custom Chart - Waterfall not working

Hi i am also unable to render waterfall chart. Appreciate any help. Adding the custom chart code used and the output am getting for ref

CustomChart {
  fields {
    // INSERT FIELD DEFINITION HERE
    field amount {
      type: 'measure'
    }
    field label {
      type: 'dimension'
    }
  }
  options {
    // INSERT OPTION DEFINITION HERE
  }
  // INSERT VEGA-LITE JSON SPECIFICATIONS BELOW
  template: @vgl {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": {
      "values": @{values}
    },
		"width": 800,
	  "height": 450,
	  "transform": [
	    {"window": [{"op": "sum", "field": "amount", "as": "sum"}]},
	    {"window": [{"op": "lead", "field": "label", "as": "lead"}]},
	    {
	      "calculate": "datum.lead === null ? datum.label : datum.lead",
	      "as": "lead"
	    },
	    {
	      "calculate": "datum.label === 'End' ? 0 : datum.sum - datum.amount",
	      "as": "previous_sum"
	    },
	    {
	      "calculate": "datum.label === 'End' ? datum.sum : datum.amount",
	      "as": "amount"
	    },
	    {
	      "calculate": "(datum.label !== 'Begin' && datum.label !== 'End' && datum.amount > 0 ? '+' : '') + datum.amount",
	      "as": "text_amount"
	    },
	    {"calculate": "(datum.sum + datum.previous_sum) / 2", "as": "center"},
	    {
	      "calculate": "datum.sum < datum.previous_sum ? datum.sum : ''",
	      "as": "sum_dec"
	    },
	    {
	      "calculate": "datum.sum > datum.previous_sum ? datum.sum : ''",
	      "as": "sum_inc"
	    }
	  ],
	  "encoding": {
	    "x": {
	      "field": "label",
	      "type": "ordinal",
	      "sort": null,
	      "axis": {"labelAngle": 0, "title": "Months"}
	    }
	  },
	  "layer": [
	    {
	      "mark": {"type": "bar", "size": 45},
	      "encoding": {
	        "y": {
	          "field": "previous_sum",
	          "type": "quantitative",
	          "title": "Amount"
	        },
	        "y2": {"field": "sum"},
	        "color": {
	          "condition": [
	            {
	              "test": "datum.label === 'Begin' || datum.label === 'End'",
	              "value": "#f7e0b6"
	            },
	            {"test": "datum.sum < datum.previous_sum", "value": "#f78a64"}
	          ],
	          "value": "#93c4aa"
	        }
	      }
	    },
	    {
	      "mark": {
	        "type": "rule",
	        "color": "#404040",
	        "opacity": 1,
	        "strokeWidth": 2,
	        "xOffset": -22.5,
	        "x2Offset": 22.5
	      },
	      "encoding": {
	        "x2": {"field": "lead"},
	        "y": {"field": "sum", "type": "quantitative"}
	      }
	    },
	    {
	      "mark": {"type": "text", "dy": -4, "baseline": "bottom"},
	      "encoding": {
	        "y": {"field": "sum_inc", "type": "quantitative"},
	        "text": {"field": "sum_inc", "type": "nominal"}
	      }
	    },
	    {
	      "mark": {"type": "text", "dy": 4, "baseline": "top"},
	      "encoding": {
	        "y": {"field": "sum_dec", "type": "quantitative"},
	        "text": {"field": "sum_dec", "type": "nominal"}
	      }
	    },
	    {
	      "mark": {"type": "text", "fontWeight": "bold", "baseline": "middle"},
	      "encoding": {
	        "y": {"field": "center", "type": "quantitative"},
	        "text": {"field": "text_amount", "type": "nominal"},
	        "color": {
	          "condition": [
	            {
	              "test": "datum.label === 'Begin' || datum.label === 'End'",
	              "value": "#725a30"
	            }
	          ],
	          "value": "white"
	        }
	      }
	    }
	  ],
	  "config": {"text": {"fontWeight": "bold", "color": "#404040"}}
	};;
}

Have tried with different combinations for the fields, but all the scenarios are throwing this output only

Hi Hari,

Thank you for posting your question!

The problem with your code is that it is trying to look for the raw field names “amount” and “label”.
However, the field names during run-time are different, and must be referenced using Holistics string interpolation syntax.

For example:

CustomChart {
  fields {
    // INSERT FIELD DEFINITION HERE
    field amount {
      type: 'measure'
    }
    field label {
      type: 'dimension'
    }
  }
  options {
    // INSERT OPTION DEFINITION HERE
  }
  // INSERT VEGA-LITE JSON SPECIFICATIONS BELOW
  template: @vgl {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": {
      "values": @{values}
    },
    "transform": [
      {
        "calculate": "datum['@{fields.amount.name}']",
        "as": "amount"
      },
      {
        "calculate": "datum['@{fields.label.name}']",
        "as": "label"
      },
      {"window": [{"op": "sum", "field": "amount", "as": "sum"}]},
      {"window": [{"op": "lead", "field": "label", "as": "lead"}]},
      {
        "calculate": "datum.lead === null ? datum.label : datum.lead",
        "as": "lead"
      },
      {
        "calculate": "datum.label === 'End' ? 0 : datum.sum - datum.amount",
        "as": "previous_sum"
      },
      {
        "calculate": "datum.label === 'End' ? datum.sum : datum.amount",
        "as": "amount"
      },
      {
        "calculate": "(datum.label !== 'Begin' && datum.label !== 'End' && datum.amount > 0 ? '+' : '') + datum.amount",
        "as": "text_amount"
      },
      {"calculate": "(datum.sum + datum.previous_sum) / 2", "as": "center"},
      {
        "calculate": "datum.sum < datum.previous_sum ? datum.sum : ''",
        "as": "sum_dec"
      },
      {
        "calculate": "datum.sum > datum.previous_sum ? datum.sum : ''",
        "as": "sum_inc"
      }
    ],
    "encoding": {
      "x": {
        "field": "label",
        "type": "ordinal",
        "sort": null,
        "axis": {"labelAngle": 0, "title": "Months"}
      }
    },
    "layer": [
      {
        "mark": {"type": "bar", "size": 45},
        "encoding": {
          "y": {
            "field": "previous_sum",
            "type": "quantitative",
            "title": "Amount"
          },
          "y2": {"field": "sum"},
          "color": {
            "condition": [
              {
                "test": "datum.label === 'Begin' || datum.label === 'End'",
                "value": "#f7e0b6"
              },
              {"test": "datum.sum < datum.previous_sum", "value": "#f78a64"}
            ],
            "value": "#93c4aa"
          }
        }
      },
      {
        "mark": {
          "type": "rule",
          "color": "#404040",
          "opacity": 1,
          "strokeWidth": 2,
          "xOffset": -22.5,
          "x2Offset": 22.5
        },
        "encoding": {
          "x2": {"field": "lead"},
          "y": {"field": "sum", "type": "quantitative"}
        }
      },
      {
        "mark": {"type": "text", "dy": -4, "baseline": "bottom"},
        "encoding": {
          "y": {"field": "sum_inc", "type": "quantitative"},
          "text": {"field": "sum_inc", "type": "nominal"}
        }
      },
      {
        "mark": {"type": "text", "dy": 4, "baseline": "top"},
        "encoding": {
          "y": {"field": "sum_dec", "type": "quantitative"},
          "text": {"field": "sum_dec", "type": "nominal"}
        }
      },
      {
        "mark": {"type": "text", "fontWeight": "bold", "baseline": "middle"},
        "encoding": {
          "y": {"field": "center", "type": "quantitative"},
          "text": {"field": "text_amount", "type": "nominal"},
          "color": {
            "condition": [
              {
                "test": "datum.label === 'Begin' || datum.label === 'End'",
                "value": "#725a30"
              }
            ],
            "value": "white"
          }
        }
      }
    ],
    "config": {"text": {"fontWeight": "bold", "color": "#404040"}}
  };;
}

In my example above, I have added these transform steps to map the run-time field names into “amount” and “label”.

{
  "calculate": "datum['@{fields.amount.name}']",
  "as": "amount"
},
{
  "calculate": "datum['@{fields.label.name}']",
  "as": "label"
 },

Hope that my answer makes sense to you.
Please give it a try and let me know if it works!

Best,
Dat

@datbth
Thankyou for the edited code and the explanation
This works now