# Displaying values on Kibana images

**URL:** https://discuss.elastic.co/t/displaying-values-on-kibana-images/373429
**Category:** Kibana
**Created:** [January 21, 2025, 6:18am UTC](https://discuss.elastic.co/t/displaying-values-on-kibana-images/373429 "2025-01-21T06:18:47Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![SaraAlshamsi](https://avatars.discourse-cdn.com/v4/letter/s/bb73d2/32.png) [@SaraAlshamsi](https://discuss.elastic.co/u/SaraAlshamsi)
#### Post date: [January 21, 2025, 6:18am UTC](https://discuss.elastic.co/t/displaying-values-on-kibana-images/373429/1 "2025-01-21T06:18:47Z")

</div>

Hello everyone,

I would like to display data on Kibana images in my dashboard.

I know how to insert images by adding the image panel:

 ![Q](https://us1.discourse-cdn.com/elastic/original/3X/5/b/5b397db1e96b5e62652d9562ef8f64c8e15e0768.png)

But, there is no option to display data on top of the images.

For example, I want to display values from 2 fields (tempertaure1 and temperature2) and then display the average:

 ![ex](https://us1.discourse-cdn.com/elastic/original/3X/b/d/bdda07fff683a9883692ebbc6d4069b1be59189c.png)

The data of course should be dynamic and depend on the time filter.

I have v 8.15.3

I tried to use Canvas but unfortunately, there are issues with time filters and it seems there are too many bugs with it.

So is it possible to do it in Kibana dashboard?

Thank you

---

<div class="post-metadata">

### Author: ![erikg](https://avatars.discourse-cdn.com/v4/letter/e/91b2a8/32.png) [@erikg](https://discuss.elastic.co/u/erikg)
#### Post date: [January 21, 2025, 6:33pm UTC](https://discuss.elastic.co/t/displaying-values-on-kibana-images/373429/2 "2025-01-21T18:33:21Z")

</div>

From what I have seen there's not a method to do this with Kibana dashboard. Sometimes Dashboards/Visualizations can be limiting.

I assumed Canvas allows you to do this, but I am not entirely sure. I also believe they are deprecating Canvas.

---

<div class="post-metadata">

### Author: ![SaraAlshamsi](https://avatars.discourse-cdn.com/v4/letter/s/bb73d2/32.png) [@SaraAlshamsi](https://discuss.elastic.co/u/SaraAlshamsi)
#### Post date: [January 23, 2025, 8:15am UTC](https://discuss.elastic.co/t/displaying-values-on-kibana-images/373429/3 "2025-01-23T08:15:46Z")

</div>

I think Canvas has issues. But, I found another solution. I used Vega to perform the task.

Thank you.

---

<div class="post-metadata">

### Author: ![erikg](https://avatars.discourse-cdn.com/v4/letter/e/91b2a8/32.png) [@erikg](https://discuss.elastic.co/u/erikg)
#### Post date: [January 23, 2025, 4:09pm UTC](https://discuss.elastic.co/t/displaying-values-on-kibana-images/373429/4 "2025-01-23T16:09:13Z")

</div>

can you share how you did it?

---

<div class="post-metadata">

### Author: ![SaraAlshamsi](https://avatars.discourse-cdn.com/v4/letter/s/bb73d2/32.png) [@SaraAlshamsi](https://discuss.elastic.co/u/SaraAlshamsi)
#### Post date: [January 24, 2025, 3:53am UTC](https://discuss.elastic.co/t/displaying-values-on-kibana-images/373429/5 "2025-01-24T03:53:12Z")

</div>

Sure! this code displays 2 values on an image:

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Displaying values on image",
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "date_field_name",
      "index": "index_name",
      "body": {
        "size": 1,
        "sort": [
          {
            "date_field_name": {
              "order": "desc"
            }
          }
        ],
        "_source": ["field_name1", "field_name2"]
      }
    },
    "format": {
      "property": "hits.hits"
    }
  },
  "transform": [
    {
      "calculate": "datum._source.field_name1",
      "as": "f1value"
    },
    {
      "calculate": "datum._source.field_name2",
      "as": "f2value"
    }
  ],
  "layer": [
    { 
      "mark": { 
        "type": "image", 
        "url": "write image URL here", 
        "width": 700, 
        "height": 400,
         "align": "center",
        "baseline": "middle" 
       
      },
        "encoding": {
        "x": {"value": 415}, 
        "y": {"value": 190} 
      } 
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "align": "center",
        "baseline": "middle"
      },
      "encoding": {
        "text": {"field": "f1value", "type": "quantitative"},
        "x":{"value": 500},
        "y": {"value": 145}
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "align": "center",
        "baseline": "middle"
      },
      "encoding": {
        "text": {"field": "f2value", "type": "quantitative"},
        "x":{"value": 500},
        "y": {"value": 170}
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 15,
        "color": "black",
        "align": "center",
        "baseline": "middle"
      },
      "encoding": {
        "text": {
          "value": " write any text/description here"
        },
        "x": {"value": 430},
        "y": {"value": 65}
      }
    }
  ]
}

```

You can do multiple calculations in "transform", for example showing the average too. In my case, I just displayed the recent/last values of field\_name1 and field\_name2. In the "layer" part, I added 4 layers, 1 for the image and the other two for displaying the last value of field\_name1 and last value of field\_name2. The last layer is to display a text.