Search code examples
elasticsearchchartskibanavegavega-lite

Draw funnel chart in Vega/ Vega-lite


I'm using vega in kibana for visualizing data. Now I want to draw a funnel chart but it doesn't have any examples of this. enter image description here Thank you for your help


Solution

  • You can create a funnel chart in Vega-Lite using a bar chart with stack: "center". For example (vega editor):

    {
      "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
    }
    

    enter image description here