How to show percentage drop (change) in funnel chart using vega lite?

[Souvik_Das]

Hi,

I have created a similar funnel chart like the below example --

Now I want to show % drop (change) between each step. How to do that?

Below is the script for the chart --

{
  "data": {
    "values": [
      {"Pipeline": "Consultation", "Count": 140000},
      {"Pipeline": "Prospect", "Count": 120000},
      {"Pipeline": "Qualified", "Count": 100000},
      {"Pipeline": "Negotiation", "Count": 80000},
      {"Pipeline": "Prototype", "Count": 60000},
      {"Pipeline": "Closing", "Count": 40000},
      {"Pipeline": "Won", "Count": 20000},
      {"Pipeline": "Finalized", "Count": 10000}
    ]
  },
  "encoding": {"y": {"field": "Pipeline", "type": "nominal", "sort": null}},
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {"field": "Pipeline", "type": "nominal", "legend": null},
        "x": {"field": "Count", "type": "quantitative", "stack": "center"}
      }
    },
    {
      "mark": "text",
      "encoding": {"text": {"field": "Count", "type": "quantitative"}}
    }
  ],
  "width": 500
}

Ref: elasticsearch - Draw funnel chart in Vega/ Vega-lite - Stack Overflow

Thanks
Souvik

[Souvik_Das]

Hi anyone from elastic,

Please help to resolve this.

Thanks,
Souvik

[Marco_Liberati]

You mean something like this?

What I did was to add a transformation to have a new delta field: Count[t+1] - Count[t] named Count_1 and then used it in a new mark with percentage format:

{

  $schema: https://vega.github.io/schema/vega-lite/v5.json
  title: MyTitle

  
  "data": {
    "values": [
      {"Pipeline": "Consultation", "Count": 140000},
      {"Pipeline": "Prospect", "Count": 120000},
      {"Pipeline": "Qualified", "Count": 100000},
      {"Pipeline": "Negotiation", "Count": 80000},
      {"Pipeline": "Prototype", "Count": 60000},
      {"Pipeline": "Closing", "Count": 40000},
      {"Pipeline": "Won", "Count": 20000},
      {"Pipeline": "Finalized", "Count": 10000}
    ]
  },
  "transform": [
    {
      "window": [{"op": "last_value", "field": "Count", "as": "Count_1"}],
      "frame": [0, 1],
      "sort": [{"field": "Count", "order": "ascending"}]
    },
    {"calculate": "- (datum.Count_1 - datum.Count) / (datum.Count_1)", "as": "dCount"}
  ],
  "encoding": {"y": {"field": "Pipeline", "type": "nominal", "sort": null}},
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {"field": "Pipeline", "type": "nominal", "legend": null},
        "x": {"field": "Count", "type": "quantitative", "stack": "center"}
      }
    },
    {
      "mark": "text",
      "encoding": {"text": {"field": "Count", "type": "quantitative"}}
    },
    {
      "mark": {"type": "text", dx: 500, "align": "left"},
      "encoding": {
        "text": {"field": "dCount", format: ".0%"}
      }
    }
  ]

}

You could tweak the y offset if you want to have the mark between steps rather than aligned with them.

[Souvik_Das]

Yes, that is what I tried to create. Thank you so much @Marco_Liberati