# Is there a way to dynamically add elements to canvas?

**URL:** <https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [February 18, 2019, 12:26pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825 "2019-02-18T12:26:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![acalypha](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/acalypha/32/41026_2.png) [@acalypha](https://discuss.elastic.co/u/acalypha)\
**Post date:** [February 18, 2019, 12:26pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/1 "2019-02-18T12:26:34Z")

</div>

Recently, I have been experimenting with Canvas on Kibana 6. The fact that one can use essql for filtering data and the elements are tweakable from the "expression editor" is awesome.

I am now wondering if there is a way to _dynamically_ set the layout of the page. As an example, I would like to make a page that adds a timelion for each of my servers separately. But since the number of those servers change over time, I want to be able to make a template that is added dynamically based on the data I couple it too. I have a hunch that this should be possible to do through the "Global CSS overrides" but I cannot find any documentation regarding this.

---

<div class="post-metadata">

**Author:** ![rozling](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rozling/32/16401_2.png) [@rozling](https://discuss.elastic.co/u/rozling)\
**Post date:** [February 18, 2019, 12:56pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/2 "2019-02-18T12:56:43Z")

</div>

This is something I'd also be interested in.

It seems like this _should_ be possible since the Image Repeat element type seems to dynamically add elements, but I don't think Canvas does this out of the box

---

<div class="post-metadata">

**Author:** ![monfera](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/monfera/32/26467_2.png) [@monfera](https://discuss.elastic.co/u/monfera)\
**Post date:** [February 20, 2019, 9:02am UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/3 "2019-02-20T09:02:18Z")

</div>

@acalypha @rozling we don't currently have this functionality but we've been discussing data-driven layout features including

1. data-driven element creation (think "small multiples" charts where the element count is dependent on how many countries are filtered)
2. data-driven element positioning (location, width/height, orientation)

I'd encourage the creation of a github issue at [https://github.com/elastic/kibana/issues](https://github.com/elastic/kibana/issues) (choose Feature Request) for this to raise the visibility of this. If someone has a support contract, it's worth asking for this feature via support too.

---

<div class="post-metadata">

**Author:** ![rozling](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rozling/32/16401_2.png) [@rozling](https://discuss.elastic.co/u/rozling)\
**Post date:** [February 20, 2019, 1:46pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/4 "2019-02-20T13:46:13Z")

</div>

Will do via both channels. My feature request laundry list is growing, but I'm not sure if we're a big enough customer to make a difference really 🙂

I'm sure this is out of scope but it would be incredible to have something approaching the level of data \<-\> dom interaction that d3 has. It feels like a lot of the necessary elements are already in place.

Having said that, I still haven't learned Vega yet, so that's an option, but I think it's not possible to bring Vega visualizations into Canvas?

---

<div class="post-metadata">

**Author:** ![monfera](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/monfera/32/26467_2.png) [@monfera](https://discuss.elastic.co/u/monfera)\
**Post date:** [February 22, 2019, 3:56pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/5 "2019-02-22T15:56:34Z")

</div>

While I'm in no position to commit to future feature additions, we're already prototyping internally with, for example, Vega.

---

<div class="post-metadata">

**Author:** ![rozling](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rozling/32/16401_2.png) [@rozling](https://discuss.elastic.co/u/rozling)\
**Post date:** [February 25, 2019, 12:18pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/6 "2019-02-25T12:18:28Z")

</div>

HI monfera,

Thanks for the reply - sounds like fun. I actually only realised after posting that Vega is / might be related to D3; can you confirm if it uses D3 under the hood?

---

<div class="post-metadata">

**Author:** ![monfera](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/monfera/32/26467_2.png) [@monfera](https://discuss.elastic.co/u/monfera)\
**Post date:** [February 25, 2019, 1:09pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/7 "2019-02-25T13:09:19Z")

</div>

Vega itself is pretty modular and its mandatory runtime backbone (`vega-transforms` etc.) don't depend on `D3`, but in typical uses, absolutely! Many of its most often used modules depend on various substantial parts of `D3` such as `vega-scale`, `vega-scenegraph` etc. and specific ones too like `vega-force`, `vega-voronoi`, `vega-projection`. It doesn't use `d3-selection` for DOM updates though.

Has a gh issue been created? Haven't found it on a cursory look.

---

<div class="post-metadata">

**Author:** ![rozling](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rozling/32/16401_2.png) [@rozling](https://discuss.elastic.co/u/rozling)\
**Post date:** [February 25, 2019, 1:59pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/8 "2019-02-25T13:59:51Z")

</div>

That's interesting, although a shame re the `d3-selection` - I'll dig in and see how far I get.

I haven't had a chance to create the feature request on github yet, but will do asap!

---

<div class="post-metadata">

**Author:** ![monfera](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/monfera/32/26467_2.png) [@monfera](https://discuss.elastic.co/u/monfera)\
**Post date:** [March 11, 2019, 7:54pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/9 "2019-03-11T19:54:00Z")

</div>

After all, the data binding as done by D3 is but one way for keeping data and a scenegraph (DOM tree) in sync, Mike Bostock also recognizes the alternatives. For example, the React model of just restating the scenegraph in function of the data and not worrying about the consequences (using diffing etc. to still enable a decent speed) is popular and React-like libraries and Svelte follow something similar too.

---

<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:** [April 8, 2019, 7:54pm UTC](https://discuss.elastic.co/t/is-there-a-way-to-dynamically-add-elements-to-canvas/168825/10 "2019-04-08T19:54:06Z")

</div>

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