# Not displaying the custom visualization

**URL:** <https://discuss.elastic.co/t/not-displaying-the-custom-visualization/316218>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [October 10, 2022, 11:55am UTC](https://discuss.elastic.co/t/not-displaying-the-custom-visualization/316218 "2022-10-10T11:55:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Meghana\_Tatavolu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/meghana_tatavolu/32/100500_2.png) [@Meghana\_Tatavolu](https://discuss.elastic.co/u/Meghana_Tatavolu)\
**Post date:** [October 10, 2022, 11:55am UTC](https://discuss.elastic.co/t/not-displaying-the-custom-visualization/316218/1 "2022-10-10T11:55:40Z")

</div>

Trying to make a custom word cloud visualization from the existing index. It is showing error as "Cannot read properties of undefined (reading 'datum')".

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "title": "A Wordcloud",
  "width": 900,
  "height": 500,
  "padding": 100,
  "autosize": "none",
  "background": "pink",
  "data": [
    {
      "name": "table",
    "url": {
       "index": "nupur2",
      "body": {
        "aggs": {
          "2": {
            "terms": {"field": "hashtags","order":{"_count": "asc"}, "size": 100},
          "aggs": {
          "_count": {
            "avg": {"field": "vaderSentiment"}
          }
          }
          }
        }
      }
    },
      "format": {"property": "aggregations.2.buckets"},
      "transform": [
        {
          "type": "formula",
          "as": "angle",
          "expr": "datum.size >= 3 ? 0 : [-45,-30, -15, 0, 15, 30, 45][floor(random() * 7)]"
        },
        {
          "type": "formula", "as": "angle",
          "expr": "[-45, 0, 45][~~(random() * 3)]"
        },
        {
          "type": "formula", "as": "weight",
          "expr": "if(datum.text=='VEGA', 600, 300)"
        }
      ]
    }
  ],
   "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "hashtags"},
      "range": ["green", "orange", "red"]
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "text": {"field": "hashtags"},
          "align": {"value": "center"},
          "baseline": {"value": "alphabetic"},
          "fill": {"scale": "color", "field": "hashtags"}
        },
        "update": {
          "fillOpacity": {"value": 1}
        },
        "hover": {
          "fillOpacity": {"value": 0.5}
        }
      },
      "transform": [
        {
          "type": "wordcloud",
          "size": [800, 400],
          "text": {"field": "hashtags"},
          "rotate": {"field": "datum.angle"},
          "font": "Helvetica Neue, Arial",
          "fontSize": {"field": "datum.count"},
          "fontWeight": {"field": "datum.weight"},
          "fontSizeRange": [12, 56],
          "padding": 2
        }
      ]
    }
  ]
}

```

 ![Screenshot (50)](https://us1.discourse-cdn.com/elastic/original/3X/4/f/4fca153b5dc78dadd103d00f337b3f8336e5c4db.png)

---

<div class="post-metadata">

**Author:** ![jsanz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jsanz/32/53734_2.png) [@jsanz](https://discuss.elastic.co/u/jsanz)\
**Post date:** [October 25, 2022, 3:26pm UTC](https://discuss.elastic.co/t/not-displaying-the-custom-visualization/316218/2 "2022-10-25T15:26:30Z")

</div>

You are mixing things (I guess from pasted code elsewhere).

This is a working example using the kibana flights sample dataset

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "title": "Weather",
  "data": {
    "name": "table",
    "url": {
      "%context%": true
      "%timefield%": "timestamp",
      "index": "kibana_sample_data_flights",
      "body": {
        "aggs": {
          "my_terms": {
            "terms": {
              "field": "DestCityName",
              "order": {
                "_count": "desc"
              },
              "size": 100
            }
          }
        },
        "size": 0,
      }
    },
    "format": {"property": "aggregations.my_terms.buckets"}
  },
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "key"},
      "range": ["#d5a928", "#652c90", "#939597"]
    }
  ],
  "marks": [
    {
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "text": {"field": "key"},
          "align": {"value": "center"},
          "baseline": {"value": "alphabetic"},
          "fill": {"scale": "color", "field": "key"}
        },
        "update": {
          "fillOpacity": {"value": 1}
        },
        "hover": {
          "fillOpacity": {"value": 0.5}
        }
      },
      "transform": [
        {
          "type": "wordcloud",
          "size": [800, 400],
          "text": {"field": "text"},
          "font": "Helvetica Neue, Arial",
          "fontSize": {"field": "datum.doc_count"},
          "fontSizeRange": [12, 56],
          "padding": 2
        }
      ]
    }
  ]
}

```

This example (copied also from [Vega official word cloud example](https://vega.github.io/vega/examples/word-cloud/)) does not randomizes the angles or sets ups any weight for the labels. It also runs a terms aggregation to count the destination cities and takes into account the kibana search and time range selections.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/a/e/aebd46d64d172001d11b273ce1054256439b9e91.png)

---

<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:** [November 21, 2022, 9:54pm UTC](https://discuss.elastic.co/t/not-displaying-the-custom-visualization/316218/3 "2022-11-21T21:54:27Z")

</div>



---

<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:** [December 19, 2022, 6:34pm UTC](https://discuss.elastic.co/t/not-displaying-the-custom-visualization/316218/4 "2022-12-19T18:34:40Z")

</div>



---

<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:** [January 16, 2023, 6:35pm UTC](https://discuss.elastic.co/t/not-displaying-the-custom-visualization/316218/5 "2023-01-16T18:35:18Z")

</div>

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