# Creating Vega visualization with Image in kibana v 7.13

**URL:** <https://discuss.elastic.co/t/creating-vega-visualization-with-image-in-kibana-v-7-13/280942>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [August 10, 2021, 3:13pm UTC](https://discuss.elastic.co/t/creating-vega-visualization-with-image-in-kibana-v-7-13/280942 "2021-08-10T15:13:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ErSumit](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ersumit/32/88708_2.png) [@ErSumit](https://discuss.elastic.co/u/ErSumit)\
**Post date:** [August 10, 2021, 3:13pm UTC](https://discuss.elastic.co/t/creating-vega-visualization-with-image-in-kibana-v-7-13/280942/1 "2021-08-10T15:13:15Z")

</div>

My vega visualization is working perfectly on vega editor, but its failing on kibana.

On elastic stack version 7.9.2, the exception message is:

_“External URLs are not enabled. Add vis\_type\_vega.enableExternalUrls: true to kibana.yml”_

But no error / exception message with version **7.13.4** , though visualization is NOT being created successfully.

No clue from debug logs (tried via Inspect)

Tried adding code block to vega but no luck:  
`config: { kibana: { renderer: svg } }`  
with reference [Vega Image + Link display in Kibana - Elastic Stack / Kibana - Discuss the Elastic Stack](https://discuss.elastic.co/t/vega-image-link-display-in-kibana/183877/3)

I'm expecting visualization to look like -- from vega editor

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/b/8b79e6b8d5302b5b77ba0e88f6dedd95afbfb653.png)

The code

```auto
{
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "padding": 5,
    "width": 600,
  
    "data": [
      {
        "name": "table",
        "values": [
   
          {"category":"A", "position":2, "value":0.3, "dvalue":50, "badgeColor": "#044ac1"},
          {"category":"A", "position":1, "value":0.6, "dvalue":50, "badgeColor": "#044ac1"},
          {"category":"A", "position":2, "value":1.3, "dvalue":50, "badgeColor": "#00bd00"},
          {"category":"A", "position":3, "value":1.6, "dvalue":50, "badgeColor": "#ff1f1f"},
          {"category":"B", "position":0, "value":0.3, "dvalue":50, "badgeColor": "#044ac1"},
          {"category":"B", "position":1, "value":0.6, "dvalue":50, "badgeColor": "#044ac1"},
          {"category":"B", "position":2, "value":1.3, "dvalue":50, "badgeColor": "#00bd00"},
          {"category":"B", "position":3, "value":1.3, "dvalue":50, "badgeColor": "#ff1f1f"},
          {"category":"B", "position":0, "value":1.6, "dvalue":50, "badgeColor": "#ff1f1f"},
          {"category":"B", "position":1, "value":1.6, "dvalue":50, "badgeColor": "#00bd00"},
          {"category":"C", "position":2, "value":0.3, "dvalue":50, "badgeColor": "#044ac1"},
          {"category":"C", "position":3, "value":0.6, "dvalue":50, "badgeColor": "#044ac1"},
          {"category":"D", "position":2, "value":0.3, "dvalue":50, "badgeColor": "#044ac1"}

        ]
      }
    ],
    
      "scales": [
      {
        "name": "x",
        "type": "linear",
        "round": true,
        "nice": true,
        "zero": true,
        "domain": {"data": "table", "field": "value"},
        "range": "width"
      },
      {
        "name": "y",
        "type": "band",
        "domain": {"data": "table", "field": "category"},
        "range": [0,600]
      },
      {
        "name": "size",
        "type": "linear",
        "zero": true,
        "domain": {"data": "table", "field": "dvalue"},
        "range": [0,5000]
      }
    ],
    
    
    "axes": [
      {
        "scale": "x",
        "grid": true,
        "domain": false,
        "orient": "top",
        "tickCount": 5,
        "title": "Images"
      },
      {
        "scale": "y",
        "grid": true,
        "domain": false,
        "orient": "left",
        "titlePadding": 5,
        "title": "Items",
        "offset": 4
      }
    ],
    
  "signals": [
    { "name": "x", "value": 75},
    { "name": "y", "value": 75},
    { "name": "w", "value": 50},
    { "name": "h", "value": 50},
    { "name": "aspect", "value": true },
    { "name": "smooth", "value": true},
    { "name": "align", "value": "left"},
    { "name": "baseline", "value": "top"}
  ],

"marks": [
    {
      "type": "image",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "url": {"value": "https://cdn0.iconfinder.com/data/icons/most-usable-logos/120/App_Store-512.png"}
        },
        "update": {
          "opacity": {"value": 1},
          "x": {"scale": "x", "field": "value"},
          "y": {"scale": "y", "field": "category", "offset": 20 },
          "width": {"signal": "w"},
          "height": {"signal": "h"},
          "aspect": {"signal": "aspect"},
          "smooth": {"signal": "smooth"},
          "align": {"signal": "align"},
          "baseline": {"signal": "baseline"}
        },
        "hover": {
          "opacity": {"value": 0.5}
        }
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![ErSumit](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ersumit/32/88708_2.png) [@ErSumit](https://discuss.elastic.co/u/ErSumit)\
**Post date:** [August 12, 2021, 9:15am UTC](https://discuss.elastic.co/t/creating-vega-visualization-with-image-in-kibana-v-7-13/280942/2 "2021-08-12T09:15:25Z")

</div>

Solved by updating kibana.yml

```auto
vis_type_vega.enableExternalUrls: true

```

---

<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:** [September 9, 2021, 9:15am UTC](https://discuss.elastic.co/t/creating-vega-visualization-with-image-in-kibana-v-7-13/280942/3 "2021-09-09T09:15:48Z")

</div>

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