# How to combine Repeat image with values over it in Canvas?

**URL:** <https://discuss.elastic.co/t/how-to-combine-repeat-image-with-values-over-it-in-canvas/147564>\
**Category:** Kibana\
**Created:** [September 6, 2018, 12:08pm UTC](https://discuss.elastic.co/t/how-to-combine-repeat-image-with-values-over-it-in-canvas/147564 "2018-09-06T12:08:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![GGorast](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ggorast/32/34669_2.png) [@GGorast](https://discuss.elastic.co/u/GGorast)\
**Post date:** [September 6, 2018, 12:08pm UTC](https://discuss.elastic.co/t/how-to-combine-repeat-image-with-values-over-it-in-canvas/147564/1 "2018-09-06T12:08:59Z")

</div>

Hi, I have this Code that is producing top 3 of something:

`filters | esdocs index="elastalert" q="match_body.intent:\"Reconnaissance & Probing\"" fields="match_body.src_ip" | sort column="count" | ply by="match_body.src_ip" expression={rowCount | as "count"} | table showheader=false perPage=3 paginate=false font={font family="'Roboto Condensed', sans-serif" size=16 align="center" color="#FFFFFF" weight="300" underline=false italic=false} | render css=".canvas__datatable { overflow: hidden; }"`

Now I want that to have background for all separate rows (the bars on the left).  
I can do it manually and set one on the top of the other but the problem is that sometimes there is top 2 and sometime even only 1 value and I will get empty bars.

My question is can I combine repeat image to show the code above?

 ![Screenshot](https://us1.discourse-cdn.com/elastic/original/3X/9/6/968c570d2eb7745fe023f5bf14cbad45e87a2521.png)

tnx

---

<div class="post-metadata">

**Author:** ![rashid](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashid/32/12566_2.png) [@rashid](https://discuss.elastic.co/u/rashid)\
**Post date:** [September 6, 2018, 2:15pm UTC](https://discuss.elastic.co/t/how-to-combine-repeat-image-with-values-over-it-in-canvas/147564/2 "2018-09-06T14:15:04Z")

</div>

It looks like you have plain blue bars there, so you could just use css to create a background on the table rows:

```auto
demodata
| columns include="username,price"
| head {math "random(1,5)"}
| table showHeader=false
| render css="tr {
 background: #ADB6FF;
 border-bottom: 1px solid #fff; 
}"

```

 ![32%20AM](https://us1.discourse-cdn.com/elastic/original/3X/9/6/963c6653d18a22df192a9bef8c0e85511df95d4f.png)

---

<div class="post-metadata">

**Author:** ![GGorast](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ggorast/32/34669_2.png) [@GGorast](https://discuss.elastic.co/u/GGorast)\
**Post date:** [September 6, 2018, 8:23pm UTC](https://discuss.elastic.co/t/how-to-combine-repeat-image-with-values-over-it-in-canvas/147564/3 "2018-09-06T20:23:08Z")

</div>

Truly awesome!  
Where can I actually learn this? All this commands, strings and practical examples and videos?

Thanks!

---

<div class="post-metadata">

**Author:** ![rashid](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashid/32/12566_2.png) [@rashid](https://discuss.elastic.co/u/rashid)\
**Post date:** [September 6, 2018, 9:04pm UTC](https://discuss.elastic.co/t/how-to-combine-repeat-image-with-values-over-it-in-canvas/147564/4 "2018-09-06T21:04:07Z")

</div>

[canvas.elastic.co](http://canvas.elastic.co) has a bunch of videos, tutorials, reference docs and blogs, though we still have a lot of content to create.

---

<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:** [October 4, 2018, 9:17pm UTC](https://discuss.elastic.co/t/how-to-combine-repeat-image-with-values-over-it-in-canvas/147564/5 "2018-10-04T21:17:17Z")

</div>

Closed on October 4, 2018, 9:17pm UTC

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