i want to create a funnel chart and i find a vega spec with sorted data it look good - Editor link
but my issue is that when i used unsorted data it not look like funnel is there any way in vegalite to make it in proper order as funnel look means by any sorting of vegalite it is possible?
Sorting is available in vega-lite
, The editor config which you attached through link is already containing a sorting
config in y-axis encoding
. You can read more about the sorting config in vega-lite documentation
Now to solve your issue, I have interchanged some Count
field values so it becomes unsorted data and added the sorting
config with descending order
.
"encoding": {
"y": {
"field": "Pipeline",
"type": "nominal",
"sort": {"field": "Count", "order": "descending"}
}
},
You can refer the link or the code below:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Draw funnel chart in Vega/ Vega-lite",
"data": {
"values": [
{"Pipeline": "Consultation", "Count": 40000},
{"Pipeline": "Qualified", "Count": 100000},
{"Pipeline": "Negotiation", "Count": 30000},
{"Pipeline": "Prototype", "Count": 10000},
{"Pipeline": "Closing", "Count": 140000},
{"Pipeline": "Won", "Count": 20000},
{"Pipeline": "Finalized", "Count": 80000}
]
},
"encoding": {
"y": {
"field": "Pipeline",
"type": "nominal",
"sort": {"field": "Count", "order": "descending"}
}
},
"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
}
Let me know if this works.