# How to display a table in Vega-Lite tooltip?

**URL:** https://discuss.elastic.co/t/how-to-display-a-table-in-vega-lite-tooltip/296725
**Category:** Kibana
**Tags:** vega
**Created:** [February 9, 2022, 12:53pm UTC](https://discuss.elastic.co/t/how-to-display-a-table-in-vega-lite-tooltip/296725 "2022-02-09T12:53:31Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![jhackert](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@jhackert](https://discuss.elastic.co/u/jhackert)
#### Post date: [February 9, 2022, 12:53pm UTC](https://discuss.elastic.co/t/how-to-display-a-table-in-vega-lite-tooltip/296725/1 "2022-02-09T12:53:31Z")

</div>

Hi folks, I'm looking for a way to show the content of an array-type field in a tooltip as a table with Vega-Lite.

The data that shall be shown in the tooltip is in aggregations-\>clients-\>buckets-\>topn\_domains-\>buckets.

```auto
     "aggregations": {
        "clients": {
          "doc_count_error_upper_bound": 126327,
          "sum_other_doc_count": 69324914,
          "buckets": [
            {
              "key": "10.112.192.25",
              "doc_count": 930552,
              "topn_domains": {
                "doc_count_error_upper_bound": 4212,
                "sum_other_doc_count": 702340,
                "buckets": [
                  {
                    "key": "DE30130PT00001.DE30130p.vw-group.com",
                    "doc_count": 31821
                  },
                  {
                    "key": "TFAOIPSRV2008.de469310.vw-group.com",
                    "doc_count": 30539
                  },
                  {
                    "key": "intranator.DE516080.vw-group.com",
                    "doc_count": 24706
                  },
                  {
                    "key": "DE246810sa0001.DE246810.vw-group.com",
                    "doc_count": 23734
                  },
                  {
                    "key": "kaspersky.de392500.vw-group.com",
                    "doc_count": 20333
                  },
                  {
                    "key": "de469310c00019.de469310.vw-group.com",
                    "doc_count": 19530
                  },
                  {
                    "key": "de469310t00058.de469310.vw-group.com",
                    "doc_count": 19512
                  },
                  {
                    "key": "de469310o00153.de469310.vw-group.com",
                    "doc_count": 19409
                  },
                  {
                    "key": "de201250s00010.de201250.vw-group.com",
                    "doc_count": 19330
                  },
                  {
                    "key": "de469310c00441.de469310.vw-group.com",
                    "doc_count": 19298
                  }
                ]
              },
              "unique_queries": {
                "value": 143352
              },
              "query_ratio": {
                "value": 15.405049905862327
              }
            },

```

It's about analyzing DNS logs. The visualization should show the Top10 DNS clients and their ratio between unique and overall queries in the chart and additionally the number of their queries, the number of their unique domain queries, the ratio between their unique/overall queries and a Top10 domain list they queried in the tooltip. This is how far I have come

![vega test](https://us1.discourse-cdn.com/elastic/original/3X/7/2/7217deb683b5e85b7ef9b076319d216d5ea112a6.png)

This is the tooltip section

```auto
		"tooltip": [
			{ "field": "topn_client_queries", "type": "quantitative", "title": "Queries" },
			{ "field": "topn_client_queries_unique", "type": "quantitative", "title": "Unique Queries" },
			{ "field": "topn_client_queries_ratio", "type": "quantitative", "format": ".1f", "title": "Query Ratio" },
			{ "field": "c.topn_domains.buckets", "type": "nominal", "title": "Top10 domains" }
		]

```

And here is a link to the spec

[Vega-Lite spec](https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQmOoLhoQAEQByAZQAEAFTY4AjAAZ9AYWFxZmCIpAATJJhSpQAMzYAnZJhooDi+JnC+mACeGkhkZL58KnIQlFC29o4AvkoMvoJBIDSyznAAHho0OEgIAFROTGzO0Z4gAI4M4c2gDWz5LQgMEIGoANqgvkiyZOotAAIqCHBD1TgFZJgzIABM5lum-OYALPymAJyGW1uo5ubX5pQ35gBaToIbGjt7B8c7F6aoYlOANOlFOYJeSh8-jcGiGvhoUEwAH1XBskSYkrIkIIkQt1JkCQBdJQDIZI2RsYZjEABWBInAwCYQGagZyyCBItI0OzDEAWUEANkopiFphARMhNDe4TQ1NpMHpjKQzIKbI5EF8xA0-NMAA5ReYhYcBeLMoSCUoIDQAF6bcxOWJkRwtLk852gDb+d0gLzcwTODRqznpQKWm0zHZKKC9NSIpEIRqbJgJJDOehI32+IbipSO70MWQ0dpwJHF+FLApQJC+ZxFbF0Lo+v0B9BBsuRFFuFAW5QmWQotjIIrez0Ib2+uD+wPs0sdXwd1Hd7JtOcdiZJApMBhQADWcGR0HhOGG3W3e4c9LcMAK7aREAYCA0nLYBdDK86SILRY6Gi-xdn4TcikxDYj+y6HpUvJVBMY6ULef4dPoBD6NB1QpLe94IPoNT6BY9oEgRPYgYIHQjmwbA7mgWynEoeLOOiDDDF42LMkod4wNWzhke4fQAOyWtuUBLBAXgMHxlo7pUOBwC25iQkgUoyWg5jLjAdDcdiaC6jcFinGcJJIKUd7RgkaCyGJghKGpDiyuauZxAkFCYt6roZKqbBQM+r5IuEoS+J+ODSf5DQFi2phbAKADMWz8SAmHovQ4QDp50avmgAqnNFhx6YcShbru+7OtSe7NHy9ymOFwqnFslBbGITjOB5Xn2GgmXmGIYhbLRfYDkO7LuSlL72D5vh+QFQVIiFxRoIcexdXFD4JfA-mNYNaWoLxuyRYcckgPl55FaAJUaJoACikXmKYF0AAqGI8l2UGdF1XeYOCUMQADu-DxC+b3Ro+Sirc1wyRXqezZEdcClYYABiACCADyACS126AASgAajs5i6pQJTGpl-Kfd9oQMH9g4NU1qUtagF1iJFpwQyAx3oEUmATFimB+I9p1iCKOP3MTP1k6kFOA1TQ3DFshybQKTMs1op3SwKuoWBASCPKYPPK6rgtfcL5MAy4EvrVskW8dt8tQxoO7KkFEA7pEeNwAzdU3O9+uk4blNrTTOyRQHVulfjGWg+YUCayCIeE3rJO-aLRtA9TwxnPTKkKJDwdwATYeYI8Yi49HYce3HIv-T7wNoKn4VB4G2ehxYbA6fTzs50Tnvx+X4u+ynpw7YzGfM9brZwDs4ViOYECa-cJRj27JcGwnFfJ1XmUXbXI9t+HNyHIcWtF+3pfe93leoGc1G6may4ISWZZAQUxE-mfhwB51y63uu7AP6BMymBIO0T2yqcdq+ozYxQtJnbU5V9SUADsKCey9JZaRVrqTK3UcD9kan1b0SdJYjTGmTCaU0WxoIWggJaSVcHrV1LqGKeUzyFVlJA9AxBeg7ggB9WIdhnaIOoXvDql9B4K2YK+BgvCaYvUinLIRw8+QxQeAosUJ8V6oC2NpSKG89piR3E5OAb1PpbCgJQJgWxSgezIOIlOxpDiaKgLkBI9hUjEGcKkQQ1QkDEEoLIfcliqK8RsTI0qfVKACnuLqSKCj7hWBimbGGpheKUBwEUMgrj3GeO8W+Khft-GaLHgKfgW5BA7g9uY3xZ8aGaIiXAXIYREnkUEF43AlA-AWOUUgs+vFpHMO2JQapoRpJ1N6I0t6LSynxLEJokUCSLAJPnvyIo-BUzOF8JQasVQxl6ivjkQs-474VhaI-GYF1dQBPfPOJEn82DfxIjMe4kUxDZW2pFWhuwdpmwFHLSZ0ChRwL-ko42PdkHhLqugzBg4FL9RaFk5Evk-DjSSsQ1qkUBLkMpMtZKp8aEv3oQVGyoxumsKKRwrhsgeFtL4TjVWmiRH2DEeSiRoNOlfOFDA35CD6VS14iczRhSdFuD0R7QxxjTGlI5VXY0XSh5BIhSEsJET7hRJiZFOJCSklTFScgdJPixWqN4rxWx9ieROJcWkNJXjtUAtPjE3Jl18m8pKZ9VplqVFg1yb0mpAycD1OGc03wTroVVyZYEjQVSPVwEGQ0+wIy-VjN4hM4N6BTA7VqlraW5UtY4CYA0iAVQEAcUGL6-1JsaaZS2SAG+AFyzekOWgC6vFTDv1XBctwX8Dk-2UrA+mHy+57EuvE+JfcIFSqgcKXiIJU61SkWUvVpwTnIt7Bg3qEKcHFphaNOFhCEVDRbGO3UKKKErVXVXGhXKcUHSYcOlhH1ZBeA+mwa9cBiBXUoHelgn1RXOvaZtOt8aCXXtvfe7xT77ivodR9ItgLUC6jjYI7pJQNiIi9REbElBMxwB8GY-6L62Bvo+h+gNUH7mSoVvBuAiG-A8VQzQBIGGl46toUGuD+4yO4AoyhtDtGsPvsdWU2hHzNHeOYvwEonjQPcfA9OvuA9ukcbYGY5k2BkkpGZJqBESxKAJmtFKNxdHP3rV3n-TRsn5P7hUFMZT4RiBqZSJp7TVAsNibwzxnVL9tJGeo+huTlAFNmadN5yz1mNNsC04IHTXGnMSZc+bAJ3T3lVQkAO4U9wFlLJWWslAOrQYijLRWvZ1b20Ag0UoD+LarltpuR2m4Aox0CjNqcONgIJ7Qf1cyxLOxZkRTKd2uquUF1guwQNYG+CN2BS3aFZS+60WUKPao0wZ7GH4svSAQQpQvC7AQDcGqjn8MzdmrvUGtjDIaifaYHAaiLASG285vTEjQkv2k0tqspRjtXTO7rS7OGwMQatdV6Dh3nuanCm9i72HcM7cgxFLlRXuk7i8IIWQpQbibVB19sZgIrr-Ze6dtR2MUfie+y6s4g6E0gE+rEO9a3zAMAevjspMVS0k7J2QO90BlSCCgFrK7kWbvDEOLBpbDgEDSyoFzgn7TpaaMwAwUoyAhjhDxxFsXpsG12XLTsjolb77lafps4rTbLnXKfgq3YKtThiAFHqCwFvno4yHQrHUY7armGmXVLrMUxB6tBUu4cg3k7Df8pu4K26JtkIPRiwn828XFVkSttbWwNu7AV+D0+DMbinGI7Ip7WPgftST9dgjSa+MZ9KlnwHkUc8fbB-nmb0s+7Q8e0dwHWwK95+5wR2vB3GecOZ2wSn1Ota051X-F+WxNGw-h4jy6hxW9K4kXzM2mPAfY5eSBz7g+edaXn5LiAQuBQi7X4r2ND2FZM5Z1WCA7POcH+Tyoi3kvpey89DPunGjVe5bnFr0ANaz7SLOWuUrhutyDwuwDyfc0GZu4UY6aiDydusiOolU58woZsZS5uwCzuXuWCy6vueCsKAeo2Qe42qAs0uwk2iUh6kG20HUnuWiuKh0S2T0l0N0d0msPMz0F0+iHcZcYsG+tMFgFgmisMiMKM6MWMNwhc9cMcC8Xsum7es6hwv6S2bMHMbg3MZ0fMoS2kUhnc3B7eO0NcJOZ0OsasGsOk2sxousWhXBicNeAcL8Y+ds4QDsTsJQrsE8sci8XcPBROd+JOB828OkUcEhxcQs0hnhBe1USamis8l0bsU8OkM8o8MRE8lhx8XhwCMsURQRFgEcRwe8rcDc7hoROhM2Zwl06cTGW8ecNwBc+RkhIR2h1hkGpRhomRW8Tcl0LcfhKRMhJRqCtCOW6ut8H++yX+BWRGdheuH4Bu2uMwQoEUO0m05uE8Uis6nyJOFUKaCS20LKKBKsYcGB4KPuUKq6-u8KBB00tMpB6KBes080+0C20epUxMq0e4KyLx8uoudOixFsURHkrx-AOAzAwgRi7xKynxOqs64ymRxAywu45iRRjRp8HytC9eJGcA-Ar6-AESSASSriL4LijqCJbu36mizxfx8uoJzsMJ7gcJhJDRZSDMfM5RS2JQGJOG-ANUOJNAeJDABJ4GRJQ+JyKsmiCAZACAmAQgbATo7gEAMA1AdAUABSeAiSoQkgLGKQrJmJNUaQ+J8J9JOqv2Davh7Iwm6JmJ2JuJOpvJepVhsaoSURJpmp7JnJlpggupdJtpQ+FUqJsiywspz+EJ-Rb+gxmuIxpOBWb8kx5y0xoxFW1wwBOUYI9yequ8qCMUNikyqa8SsCuMqCKB5udUNEfW3ukKrIJxuBZxk0weRBVx02TRAcRZ9xUef6wm5JbxbZAZPB52Ok0JsJxSHpqRBGFs1UxedcbJTAWJqyrp7p-J+pPB9a52vxBUvgAJQJCIeMHZ4JPBAo8hs0pJX0lJh5j6fZNpg5M25szyo+vhZpzpU53JVpfJHhxRTRfOUiIpYpEpbp0pyocptAmAipTAypIQbAapiIGpN5E52pbp1pA5PRkG1WGUDpEApp45k5XJPJj5ApXZZw+qJOfpcpW5Bem0zJJGjpEFHJd5GFp5cFp84U+oAx34QxgEYZ3+5ujaUxABMxlWeE1WdUaiu8qZ9yjMmZmxsCooJoOqHU4UzyBxA2xxPcpxgeVZhBYgtZ5BtFACkedBJ+B5HZlJhFNeUBFUvZNJ-Zs5npPBJyJumRqFFp950FmFc5BGCFekS5-xgJWa65+l1+1ekGXaxo+5rZy5G5wVImJ5sFYR55HU4C15qFLp9lM5T5iJLqDGMWS2op4pkp35-pf5AFQFqp6pzscVVFEVz5SJ-ix+siaoKF5plFD51FkVTR1UV53S+FnZBe9MRpcGZFxV6F9VpVyV7S48cswZjFoZ+WcZgI7F0ZnFsZRuDwMy5goM2kVlewUOax3SGxa1sCESzyKBzyoMAoslWB8lQ2FZSliKqAR1oeU26lLqew11TZ2lsiZJoVm5PlbeNeMszVbl4Qq5nlIJ71Ven1kGuoqBChaJ1JSAtJ5lZ5kGu64SNltVfVDlDVZVKim0eoo5V6QVrxIVeNYVplaNg1pseqNwSNt5KNiVWFBezym075mVX5bVuVSpKQwFoFDgRVWpJVsNNFt+tWENVVPVyN05MFvNjVVq0WSFNVlNotjlFlHVfOmibVBlTR1E+qo1uywxE1T8Phf+zaG4XF8ZfaAcIo207We8vEOwEykyVto6iie8ZS8h1WJBxZmBRxZZCl51+BylFx52RZ8Ut14e7S+29yqlNB56i2CsH0MdHs5OvQZMNwESqttFyJmiMdeGcA1oKgOw7VJRu8lVpUGdcdPeJEOANwCAedL5Ow+58dZdSdVdtFDMPpRdsdp+bAIkWwH094KQKdLqzyJFsixdQ4-ocAjAwNs+Kc-F6dbd3ed6di5dkgLAfdQ10s-OOl8dC95gZAomH1k9Vc8SaV0ds9m9idCAxSK960FU9NXem9Ik4crQjdhOd+mtGueWgBVE7U01-+htc1QBuRJ6S1Y65svaLW6xdt2Z5Us0TtHUPax1HtPOilPtl15211gdZBwd+me81WvWT1F6x9EWd9a2veT9Q1qsLdGgxd7dgg995spDV9nU69siHkOa-AVmHBN+Q1nU2NIAsAZGO4XqbMfNXDNdJOxd1YKgzEiIfgTsl9EiL8gtrdhDPeW9MAleqOQ+WUmiOAXgFgzetq9DEi6tM9yj89idDMhjU9iNt9pdideRcjVjg9SjJdd69dS1ljVcEUo+r9TFVaH95SpyJWv94ZcZCqO0RGZRZws0Y6DarWKswooS8WTtxy2KbthxpZiD3tRC1ZrmalmDNMe86tdxDCzZS2cAKsNRXEUAZiSAtsQ4Mk0w5qmS55OwTDpUcAgIeqeM0AcAIItT7i3IzgjTGSDJ48mi2cMsuMVA-T9TQz4aIzOqai9amiZAbpTA2IZiiAcAVASGXA4aTANoL+DO3SVgVghgaMVgaMugugp0aMcM10WsUACQlAvgTAldvltFMTKzOaYN-AEAF+lANDWwiygUagCcqytsaoTTaO5NeF7gKgQk-z1AqyOJwgopwj1CwC4zDA-AQk9gEwgguLL45YK50+gJspILOAYLWG-TULCzll5smiSAZwoM3TUAtA2JdTCk0LOqssJjuLbIrA9VNLkL7IPLPBHUKkPj41-jFgxoU1UZP9raf9VE0+1EUya8BZ2kHusBpUOoMCD1lAhwDJw55gRZXMi67tGT0KSD2ThBoMMseTshe8rteDUdL1c9bAcAm2qCHjUGxoFDV68d3ruwwCfrK1ijGg7dIb1E0+DjWkuwLVS20bSdvr8bG0YIbTUbnrIbzy6j6+Q51UR9HrwbqbQo6bXKqCtdPeMb4SfrlbXVybObPruMFbNCTj2bpbS1Jy9bJyxbTxzbuwMCbb4M0r79RtFUgT+us1IT81S1RwgDA6O58xRwurI6WNKacxDyDJjDFU8D1r5Z66eBdrFxDyAo4d6D1xhlF8u0brjxnbNbSdZu4bs0WbQbj7QDW2e9vGZwjbG9H7DMV+E9P7Zw1bd6ubYb6b2ktuNj4HqbQHGj85ZuPDKbQDCSbbyzsHXrqbq+wHvL4SHb77cHQD5b37+HMVf6XbF5vbX9WHubLcFbNWDFWtzFOtMw1j+tMZs7-9ZsnU9MCj9W5uyZa7ia9wL8tUdUtU8hdOJyFV+7K6XtR7lZl1UiTrNefbm0Wl+DsiXgMkfgOJBViIhaDJPDmAsg0Um0Ri6b9ymiCIVSpAGQeMXYGmCIoQMgXgmAGLNM68jObCxK0wsgGJNAkkfraibqi4jUKSXqQyUaxnizPDESEXUpEaPqoy8XmiseejZgOwII6bEUmiM8XYkXKXsXaXXZ-b2oTn7gxX0XkaTSZXuhlSqQPIHdJX9XMaizNiY72t-jrTae39Btyr3HaAFsDwQC2UdUYdoMo+Il21zym7XxoSp6aTclntZ1SnF11Zu0l7dZp8t7JTz1pUSIWATSuIUA+iSAYknnLNgFbNhnnNTpkFPNSVdOO0NCPD0YsgqUWY6JXqQw8Q6mN3+VIFhVj3FF-V4t6N7S9yf8hH4ZV38p-5rNKpIPYFXNt5EPL3LmcPNAzgf0qNA1dOzHb9PXRtU7HFwT3+xuSafO+ogIm2IooSMBrWMC4UooeqXx0Ulw8n2B3kWTY2Fx9yZsankGs6E8sUd7m1yObPLKBorAgXqWqyvg6yQ+e2+XeFUAUiHCCHBbUV6eytUAOw2vfrQlFX6A0Aeoxv1ngISbCs0A20VvZHPBQltvvpmvpgjveHzvBcb7cUhvuonviHBG9yYNBvDMgfuvFBBcrvpU9vYgEfh+mWBccP9vAfH0Ovif3vbm3XrHsrDyuFnHM7VPlA5utWhovHlwEUjJInfIWZWxNU-MdODy4yPPp1fu-P5xskIve3Wn7rWcvVctxNr3ek9WURDgzgTAE-H0X7XvBG2UAVJOx32Ab0Z3b0IoIIPWCT46NwYycPD5SGPEBS4akftFcPW12Z2xL8cMzgCARQTttiDlB-2I-AuPHDHzKiZvtfol2x0G1-t-8gizMfh9An4QAmA0-Injnz8ZG1BEhfSngVmNwOt-E5sStkWzNwaIr4BEWiBzBEh+BHwi2OHG4A2DyBRgEdRhMSBADKgNAUAHMN4DcTYA7AsoXhpQAtb9Zl0xiA7iAHIGUD0AgQJmFWHZxiR+UgYNwA+FSCUBjouYZ0MWVci8DB4-AuxHQM2CohRBgNQFJII0AsDgw3IYaO-T4HYgFBQg1sCIMrpGJ38rHd6O2nUE8CeoMg8ap+EGI0DeG+gwQe8CMFS4TBcEadkkAsEVYrB0gkMHYINx6CBBig4Qe4OYHiDrYfgzQbYKtaOD5BLgpQcYIiEBpohNggIVaxlbBCDBrglwMkJiEZD0m+gAANT6AAA5OUJKH6BlBldAodoORCZD36fgrNN2EHgfQigjUD6BehMAaBQgH0ckA+CYAygzQSgA2EwGaAjB-B9QzgSMJpDVhKILQKINJA0DrNfAOYEAHYGjC1gpgBQcoIsNUCbAdABgGwPUMcCShJwLYKYTyCcBLDNgFIf-ppEtAUYCgE4KcNYMXS2CmhIAPwCUDWEjwemxQZJKaCUCNgVAmANQBoAACqgxfQAAEVVw+gNGAAXOFvCrhOg7WoNyuT2QAeuiDQIsEmA3DIgyw9AO0EmBgiW0pAJwKzghHHE+osoOSHhHNDLguYvQFQKsHwHNgNB6Q+oTK1ohEjNgpI+wHQApHqBaIBwjQPCNz5MxXhlwuoTyDsE3xCRxIlcGSOFEqBKRYo8EZsGhGMU4RPXaUZyPeH9hPhGIg3HyOVGCjyR6o0UT6FwEwh0AwoLwDcPFHoBJR84REQAQNEXCqBzAnqFaxSB4NzRdwwcHWHyCaiaRIAYwGYEsD+jxQquT7r6AsQtAOY0wSsPyjIAyMCgezRYBoEnDKgEWwIuYb4AWGgBowbpP4SAAADEDyAAEIMxTg6wsETSNLG9A-AGgSsU8n8RihwIUQZsSADIAMBce6JNxEML6DeBtM7YjKJtF4gBhlwA4ocfwCbEsgmwoWdsZ2MdpzivYi4l0eONXHoAOxL8LsesINh-NmAS4l4ROP3Hrjuxy4QyDQBHAIgdwVgVsRWMrFwB0M5gLwJFEph9Rnx5Y9se+LWxfinA8QXHn+LbH7jAJn478cuHWa7hhYFxZQNgOgjXDlw7QtMNeHQCfd3ARQGUFZDgA0AyAWAKgXIBwneI1huYRiB3XDAFBbhGgX0G+GwknUQAVQZwNsIsQEggAA)

I found no way to encode the buckets from aggregations-\>clients-\>buckets-\>topn\_domains-\>buckets in a reasonably way as a table in the tooltip. I also tried to flatten these buckets, assemble strings from key and doc\_count but then I stumbled on how to output these 10 new strings at one time in the tooltip.

Maybe it's totally easy but I just don't see it 😄 Do you have a hint on how to handle this?

---

<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 9, 2022, 12:53pm UTC](https://discuss.elastic.co/t/how-to-display-a-table-in-vega-lite-tooltip/296725/2 "2022-03-09T12:53:36Z")

</div>

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