# Not able to visualize percentage on pie with signals

**URL:** <https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-with-signals/276481>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [June 21, 2021, 5:57am UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-with-signals/276481 "2021-06-21T05:57:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![saumya1](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/saumya1/32/87139_2.png) [@saumya1](https://discuss.elastic.co/u/saumya1)\
**Post date:** [June 21, 2021, 5:57am UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-with-signals/276481/1 "2021-06-21T05:57:49Z")

</div>

```json
{
   "$schema":"https://vega.github.io/schema/vega/v5.json",
   "description":"A basic pie chart example.",
   "width":200,
   "height":200,
   "autosize":"none",
   "signals":[
      {
         "name":"startAngle",
         "value":0,
         "bind":{
            "input":"range",
            "min":0,
            "max":6.29,
            "step":0.01
         }
      },
      {
         "name":"endAngle",
         "value":6.29,
         "bind":{
            "input":"range",
            "min":0,
            "max":6.29,
            "step":0.01
         }
      },
      {
         "name":"padAngle",
         "value":0,
         "bind":{
            "input":"range",
            "min":0,
            "max":0.1
         }
      },
      {
         "name":"innerRadius",
         "value":0,
         "bind":{
            "input":"range",
            "min":0,
            "max":90,
            "step":1
         }
      },
      {
         "name":"cornerRadius",
         "value":0,
         "bind":{
            "input":"range",
            "min":0,
            "max":10,
            "step":0.5
         }
      },
      {
         "name":"sort",
         "value":false,
         "bind":{
            "input":"checkbox"
         }
      }
   ],
   "data":[
      {
         "name":"table",
         "values":[
            {
               "brand":"open",
               "mentions":"inc1"
            },
            {
               "brand":"close",
               "mentions":"inc2"
            },
            {
               "brand":"close",
               "mentions":"inc3"
            },
            {
               "brand":"resolved",
               "mentions":"inc4"
            },
            {
               "brand":"open",
               "mentions":"inc5"
            },
            {
               "brand":"open",
               "mentions":"inc6"
            }
         ],
         "transform":[
            {
               "type":"pie",
               "field":"mentions",
               "startAngle":{
                  "signal":"startAngle"
               },
               "endAngle":{
                  "signal":"endAngle"
               },
               "sort":{
                  "signal":"sort"
               }
            }
         ]
      }
   ],
   "encoding":{
      "theta":{
         "field":"mentions",
         "stack":true,
         "aggregate":"count"
      }
   },
   "transform":[
      {
         "window":[
            {
               "op":"count",
               "field":"mentions",
               "as":"TotalTime"
            }
         ],
         "frame":[
            null,
            null
         ]
      },
      {
         "joinaggregate":[
            {
               "op":"count",
               "as":"groupcount"
            }
         ],
         "groupby":[
            "brand"
         ]
      },
      {
         "calculate":"datum.groupcount/datum.TotalTime",
         "as":"PercentOfTotal"
      }
   ],
   "layer":[
      {
         "encoding":{
            "color":{
               "field":"brand",
               "type":"nominal",
               "legend":"true",
               "scale":{
                  "range":"category20"
               }
            }
         }
      },
      {
         "encoding":{
            "text":{
               "field":"PercentOfTotal",
               "type":"nominal",
               "format":".2%"
            }
         }
      }
   ],
   "scales":[
      {
         "name":"color",
         "type":"ordinal",
         "domain":{
            "data":"table",
            "field":"brand"
         },
         "range":{
            "scheme":"category20"
         }
      }
   ],
   "marks":[
      {
         "type":"arc",
         "from":{
            "data":"table"
         },
         "encode":{
            "enter":{
               "fill":{
                  "scale":"color",
                  "field":"brand"
               },
               "x":{
                  "signal":"width / 2"
               },
               "y":{
                  "signal":"height / 2"
               }
            },
            "update":{
               "startAngle":{
                  "field":"startAngle"
               },
               "endAngle":{
                  "field":"endAngle"
               },
               "padAngle":{
                  "signal":"padAngle"
               },
               "innerRadius":{
                  "signal":"innerRadius"
               },
               "outerRadius":{
                  "signal":"width / 2"
               },
               "cornerRadius":{
                  "signal":"cornerRadius"
               }
            }
         }
      }
   ]
}

```

Signals are working fine but m not getting the data on pie.  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/0/70f9b224a0406cc4598400bb59389d84ba2a4443.png)

 ![pie chart](https://us1.discourse-cdn.com/elastic/original/3X/c/c/cc1b67f99c71550dc29f51edca03d195f4e347c6.png)  
Screenshot of error and required result i have attached.  
thanks in advance 🙂

---

<div class="post-metadata">

**Author:** ![nickofthyme](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickofthyme/32/60032_2.png) [@nickofthyme](https://discuss.elastic.co/u/nickofthyme)\
**Post date:** [July 12, 2021, 5:34pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-with-signals/276481/2 "2021-07-12T17:34:44Z")

</div>

Hey @saumya1

I'm not a vega expert to know how the top-level `marks` and `encodings` interact with each other. That said I found a solution to at least show the slices given the data.

The main thing I did was move your top-level `transforms` into the data transforms before the `pie` transform. This gives you the table I think you are expecting...

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/4/4/441053ca881aaa8b3e308f9d80e39c0b353ade56.png)

To render the `arc` marks, I just changed the field to point at the final transform row of `PercentOfTotal` and point the color scale to point at the `mentions` field. Doing this an a few minor other things gives me this result below...

![image](https://us1.discourse-cdn.com/elastic/original/3X/d/6/d6132af16eb5a24252102529832346cac4272d88.png)

You can see the full specification I used [here](https://vega.github.io/editor/#/url/vega/N4KABBBEAkDODGALApgWwIaQFyUQFzwAdYsB6UgN2QHN0A6agSz0QFcAjOxge1IRQyUa6SgFY6AK1jcAdpAA04KABNkCAE6NCeHnJwBBMO3SxG8MIUbIwSdOrxhkAD3SpCAG2R0FSsJADujMos2ABMAAzhihB+KIzU+GGR0VDorHjcpgBeyNiQMrK5KX6m1DLo7rDYANq+MaAxjVDlqLk4sHh2ePoy1J4+TY2QFBWsbVF1TZDsjDLK2A2DU7OE6Xnq6L1Fk0uQqLPYE0tTGE7YAGx0oQCcxccleMiEh3ThAIw7MQC+O193EItdi02pBkHMen1tvdhqM2pcbv8hjM5gtPssZKs8OtNtQofcoPs9Ed8X5Thcrrc0UMOk8Xu8qT9Bn8doDBvlXCDCOhlBD+oiYjD3GNDvyoMj5lhWcdICs1jgNlsBiS9gcsMT8Xt0Gc1XQPvdGU1mYMpUNgXlZjJkOoAErcxisKqivwjIXjJ3TWYSk1s2VY+U4vEawkiqkCslYa7q6E055YPXHA2NI1Nb3NDl5eDcdSWm12h1K3Yu4Vq93i1Ekvy+7GKp1h1VR6Xht4N3Yxl6iBm-RGpvxm9pZrHuottABmFVgyFLnvLyqrOCQyHgAGt2Nwzp2mb4ALrFSDKdCdGosqns1p5TrsPkn4dVLC1Cs9tnsBUSyDcQhggsVvZgnSyW8yjI8BvJAoYQMm+KPlMz6bK+8DuJkgbfq0Mh-jIAGzPAoSgRWEH3FBSIvhmCETl+yooWhGFAQAzDhJJ4ccBECjBKLymo3DuFQ8y1icv66FR8AACx0fiDFLExYpETg76fjxQwUfx5pAaIIn6nJEl+Cxr4yXIclhnx-5KfA5yqQmVI7ieeAKrAI5ZqgR4PmBQx4AAnh+eSBHM3D+GRGrvreYDVJAmasKhkAWRWAojlY7jKAFQUKYZEWRX4JjYIFkAACrcJ07iZYwZ7JZFkAjhsZ53k5gwyKw7juHpTTVbVlUQFuTlicazV+K57k4BI3CzOg1DUOowiPL50L+Q5KUCiFYWdUV35pRV00CsN3CsIQs1YvN9V+GtG3sC5U0rdMRHzW16mdZA3UgrZ6ioDVmC7aCTiEOoeT7ngrCoAw6jrZt62oaQn3fXQ2W5flZ7PUtkAAApWvAv4APIjuDFSmUs7UpldN15JYSHKtFyCxXk8PqIjqEo2j7jjdKHRdLybQaQKpTlDT7SdPYjMY2pV1gjyvT9JKnUs-EbN5Pz3OdVjrYDjOJ2s+j-b2DzZm4eZvzbnckAIBUajHfUJ59sFHFZgAyvAeu011bkglmygDTT7rKNwGCqgRe4HpgOAXle35EyTOCJehqtgDLkAKri8vRgu5XBQeNBZi5ESh4m3xa74kDuOgLlWgbAJopq6hLulwDXbb6XXc4g5+BsDv5lgYCRuHYKZg7vTR9KjxOH6GklTFr5kxTeBUzl6PPbjOAFIS49XXdGB+pAVwAKSh+n+qazERVF0ut73tj0KT5AdjwNbJV-fZwvfp93vXegl65Ay7qt9wqid7sv551fxXd36YDM-3Ymg8EbI1RmPJ2Ity49XyK7R21tdjzwPHkFea8kzPWirVd+-sB55GDo6EWUAj7TzgbtAUnhcSsWuuoYUpCoC6yFn4TMCF1AWyttLZ62pmZ0LFkrAIQQWBgFIGAbC7CrpHW-grHh7NcDIHiPgQRwjUFJguk5SAG1PpMyuvTLmgtNErSgAHV82jui6KUd8Z6ktTESOmoAwOoJwSmNETYrkAtIRYOVIraRLipbTRlj6GQOZbT11vFwkoUilKBLzFUJxKU3zpCtEE+0ISCFhLKLwwIwREAKJEb456mZswJKie4jUniMxZkicEsx4E2obkNNuEAXwgA). I am not sure how to link the text to the shapes but I think you can figure that out from here.

Best of luck!  
Nick

---

<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:** [August 9, 2021, 5:35pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-with-signals/276481/3 "2021-08-09T17:35:35Z")

</div>

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