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

**URL:** <https://discuss.elastic.co/t/how-to-show-percentage-drop-change-in-funnel-chart-using-vega-lite/318504>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [November 9, 2022, 5:53am UTC](https://discuss.elastic.co/t/how-to-show-percentage-drop-change-in-funnel-chart-using-vega-lite/318504 "2022-11-09T05:53:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Souvik\_Das](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/souvik_das/32/107606_2.png) [@Souvik\_Das](https://discuss.elastic.co/u/Souvik_Das)\
**Post date:** [November 9, 2022, 5:53am UTC](https://discuss.elastic.co/t/how-to-show-percentage-drop-change-in-funnel-chart-using-vega-lite/318504/1 "2022-11-09T05:53:57Z")

</div>

Hi,

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

![funnel chart](https://us1.discourse-cdn.com/elastic/original/3X/7/e/7e21c9e6a534f869669b698b1898fded5e1ac1fa.png)

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

Below is the script for the chart --

```auto
{
  "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](https://stackoverflow.com/questions/60444288/draw-funnel-chart-in-vega-vega-lite)

Thanks  
Souvik

---

<div class="post-metadata">

**Author:** ![Souvik\_Das](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/souvik_das/32/107606_2.png) [@Souvik\_Das](https://discuss.elastic.co/u/Souvik_Das)\
**Post date:** [November 16, 2022, 4:17am UTC](https://discuss.elastic.co/t/how-to-show-percentage-drop-change-in-funnel-chart-using-vega-lite/318504/2 "2022-11-16T04:17:11Z")

</div>

Hi anyone from elastic,

Please help to resolve this.

Thanks,  
Souvik

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 14, 2022, 4:03am UTC](https://discuss.elastic.co/t/how-to-show-percentage-drop-change-in-funnel-chart-using-vega-lite/318504/3 "2022-12-14T04:03:59Z")

</div>



---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [December 14, 2022, 5:20pm UTC](https://discuss.elastic.co/t/how-to-show-percentage-drop-change-in-funnel-chart-using-vega-lite/318504/4 "2022-12-14T17:20:01Z")

</div>

You mean something like this?

 ![Screenshot 2022-12-14 at 18.14.21](https://us1.discourse-cdn.com/elastic/original/3X/f/f/fff48c0f12d4888650c053c4228f1a1327c38e7b.png)

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:

```auto
{

  $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.

---

<div class="post-metadata">

**Author:** ![Souvik\_Das](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/souvik_das/32/107606_2.png) [@Souvik\_Das](https://discuss.elastic.co/u/Souvik_Das)\
**Post date:** [December 19, 2022, 9:19am UTC](https://discuss.elastic.co/t/how-to-show-percentage-drop-change-in-funnel-chart-using-vega-lite/318504/5 "2022-12-19T09:19:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 16, 2023, 9:19am UTC](https://discuss.elastic.co/t/how-to-show-percentage-drop-change-in-funnel-chart-using-vega-lite/318504/6 "2023-01-16T09:19:24Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.