# Vega Pie Chart not Rendering

**URL:** https://discuss.elastic.co/t/vega-pie-chart-not-rendering/168850
**Category:** Kibana
**Tags:** vega
**Created:** [February 18, 2019, 2:27pm UTC](https://discuss.elastic.co/t/vega-pie-chart-not-rendering/168850 "2019-02-18T14:27:40Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![PeterSkarmyr](https://avatars.discourse-cdn.com/v4/letter/p/ee7513/32.png) [@PeterSkarmyr](https://discuss.elastic.co/u/PeterSkarmyr)
#### Post date: [February 18, 2019, 2:27pm UTC](https://discuss.elastic.co/t/vega-pie-chart-not-rendering/168850/1 "2019-02-18T14:27:40Z")

</div>

I am trying to make a simple pie chart in vega, but it won't render. I think there is something wrong with the data structure. I have tried many vega transforms, but I can't get it to work.

Am I doing something wrong?

**Vega Configuration**

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v3.3.json",
  "title": "Event counts from all indexes",
  "data": [
    {
      "name": "table",
      "url": {
        "%context%": true,
        "%timefield%": "lastupdated",
        "index": "queueitems-*",
        "body": {
          "aggs": {
            "kategori": {
              "terms": {"field": "kategori.keyword"}
            }
          }
        },
        "size": 0
      },
      "format": {
        "property": "aggregations.kategori.buckets",
        "as": "values"
      },
      "transform": [{"type": "pie", "field": "doc_count"}]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "key"},
      "range": {"scheme": "category20"}
    }
  ],
  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "enter": {"fill": {"scale": "color", "field": "key"}}
      }
    }
  ]
}

```

**Response from \_search in network console in browser**

```auto
{
    "took": 6,
    "timed_out": false,
    "_shards": {
        "total": 105,
        "successful": 105,
        "skipped": 0,
        "failed": 0
    },
    "hits": {
        "total": 98,
        "max_score": 0.0,
        "hits": []
    },
    "aggregations": {
        "kategori": {
            "doc_count_error_upper_bound": 0,
            "sum_other_doc_count": 0,
            "buckets": [
                {
                    "key": "Automatisert",
                    "doc_count": 52
                },
                {
                    "key": "Out of Scope",
                    "doc_count": 41
                },
                {
                    "key": "System Exception",
                    "doc_count": 3
                },
                {
                    "key": "Delvis Automatisert",
                    "doc_count": 2
                }
            ]
        }
    }
}

```

**Running VEGA\_DEBUG.view.data('table')**  
 ![bilde](https://us1.discourse-cdn.com/elastic/original/3X/c/d/cd165d61ee8b44655a1fe500e85c16a9e65bd42e.png)

**Running JSON.stringify(VEGA\_DEBUG.vega\_spec)**

```auto
{"$schema":"https://vega.github.io/schema/vega/v3.3.json","title":"Event counts from all indexes","data":[{"name":"table","format":{"property":"aggregations.kategori.buckets"},"transform":[{"type":"pie","field":"doc_count"},{"type":"nest","keys":["key","doc_count"]}],"values":{"took":76,"timed_out":false,"_shards":{"total":105,"successful":105,"skipped":0,"failed":0},"hits":{"total":47,"max_score":0,"hits":[]},"aggregations":{"kategori":{"doc_count_error_upper_bound":0,"sum_other_doc_count":0,"buckets":[{"key":"Automatisert","doc_count":24,"startAngle":0,"endAngle":3.2084350504746824},{"key":"Delvis Automatisert","doc_count":17,"startAngle":3.2084350504746824,"endAngle":5.481076544560915},{"key":"System Exception","doc_count":6,"startAngle":5.481076544560915,"endAngle":6.283185307179586}]}}}}],"scales":[{"name":"color","type":"ordinal","domain":{"data":"table","field":"key"},"range":{"scheme":"category20"}}],"marks":[{"type":"arc","from":{"data":"table"},"encode":{"enter":{"fill":{"scale":"color","field":"key"}}}}],"config":{"range":{"category":{"scheme":"elastic"}},"arc":{"fill":"#00B3A4"},"area":{"fill":"#00B3A4"},"line":{"stroke":"#00B3A4"},"path":{"stroke":"#00B3A4"},"rect":{"fill":"#00B3A4"},"rule":{"stroke":"#00B3A4"},"shape":{"stroke":"#00B3A4"},"symbol":{"fill":"#00B3A4"},"trail":{"fill":"#00B3A4"}},"autosize":{"type":"fit","contains":"padding"}}

```

---

<div class="post-metadata">

### Author: ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)
#### Post date: [February 18, 2019, 3:26pm UTC](https://discuss.elastic.co/t/vega-pie-chart-not-rendering/168850/2 "2019-02-18T15:26:13Z")

</div>

@nyuriks Thanks!

---

<div class="post-metadata">

### Author: ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)
#### Post date: [February 18, 2019, 6:50pm UTC](https://discuss.elastic.co/t/vega-pie-chart-not-rendering/168850/3 "2019-02-18T18:50:35Z")

</div>

@PeterSkarmyr hi, could you attach the results of [these instructions](https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e) to your question? Thanks!

---

<div class="post-metadata">

### Author: ![PeterSkarmyr](https://avatars.discourse-cdn.com/v4/letter/p/ee7513/32.png) [@PeterSkarmyr](https://discuss.elastic.co/u/PeterSkarmyr)
#### Post date: [February 19, 2019, 7:34am UTC](https://discuss.elastic.co/t/vega-pie-chart-not-rendering/168850/4 "2019-02-19T07:34:28Z")

</div>

I've added the results to the question. Thanks 🙂

---

<div class="post-metadata">

### Author: ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)
#### Post date: [February 19, 2019, 6:31pm UTC](https://discuss.elastic.co/t/vega-pie-chart-not-rendering/168850/5 "2019-02-19T18:31:09Z")

</div>

@PeterSkarmyr you are missing a few required values for your `arc` mark. Also, I would recommend always using `update` encoding rather than `enter` - because in Kibana the size of the graph might change at any moment, and you don't want to have constants anywhere.

```
  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "update": {
          "fill": {"scale": "color", "field": "key"},
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "x": {"signal": "width/2"},
          "y": {"signal": "height/2"},
          "outerRadius": {"signal": "min(width,height)/2.2"}
        }
      }
    }
  ],
```

---

<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: [March 19, 2019, 6:31pm UTC](https://discuss.elastic.co/t/vega-pie-chart-not-rendering/168850/6 "2019-03-19T18:31:20Z")

</div>

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