# How can you create reusable Vega-Lite components?

**URL:** <https://discuss.elastic.co/t/how-can-you-create-reusable-vega-lite-components/366246>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [September 9, 2024, 1:11pm UTC](https://discuss.elastic.co/t/how-can-you-create-reusable-vega-lite-components/366246 "2024-09-09T13:11:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ani\_Watches](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ani_watches/32/137427_2.png) [@ani\_Watches](https://discuss.elastic.co/u/ani_Watches)\
**Post date:** [September 9, 2024, 1:11pm UTC](https://discuss.elastic.co/t/how-can-you-create-reusable-vega-lite-components/366246/1 "2024-09-09T13:11:31Z")

</div>

Hello everyone,

As a newcomer to Vega, I'm working on a [dashboard](https://aniwatches.com/) that displays various metrics for different servers (such as status, number of containers, and names). All data comes from metricbeat/heartbeat queries.

I'm aiming to create a reusable Vega-Lite component where I can specify a server ID when adding the component to the dashboard. Ideally, this would involve some kind of settings input when integrating the component.

I'm not sure if this is feasible or how to incorporate an input variable into my Vega-Lite [JSON specification](https://aniwatches.com/).

Since I'm working within Kibana and only have access to Vega-Lite, and am not familiar with creating components using the Elastic JavaScript Client, I’m seeking guidance on how to achieve this.

Thank you!

---

<div class="post-metadata">

**Author:** ![carly.richmond](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/carly.richmond/32/104935_2.png) [@carly.richmond](https://discuss.elastic.co/u/carly.richmond)\
**Post date:** [September 9, 2024, 1:11pm UTC](https://discuss.elastic.co/t/how-can-you-create-reusable-vega-lite-components/366246/2 "2024-09-09T13:11:55Z")

</div>

From #Community Ecosystem to #Kibana

---

<div class="post-metadata">

**Author:** ![carly.richmond](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/carly.richmond/32/104935_2.png) [@carly.richmond](https://discuss.elastic.co/u/carly.richmond)\
**Post date:** [September 9, 2024, 1:11pm UTC](https://discuss.elastic.co/t/how-can-you-create-reusable-vega-lite-components/366246/3 "2024-09-09T13:11:55Z")

</div>

Added #vega and removed #snapshot-and-restore

---

<div class="post-metadata">

**Author:** ![carly.richmond](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/carly.richmond/32/104935_2.png) [@carly.richmond](https://discuss.elastic.co/u/carly.richmond)\
**Post date:** [September 9, 2024, 1:19pm UTC](https://discuss.elastic.co/t/how-can-you-create-reusable-vega-lite-components/366246/4 "2024-09-09T13:19:27Z")

</div>

Hi @ani_Watches,

Welcome! To confirm would this server ID value potentially come from a filter selected in your dashboard? There is a way to pull the clauses from the dashboard filters with [tokens such as `%dashboard_context-must_clause%`](https://www.elastic.co/guide/en/kibana/current/vega.html#vega-queries). Then you can visualize the data returned from Elasticsearch as you see fit.

The [first example in this piece](https://www.elastic.co/search-labs/blog/kibana-vega-building-advanced-visualizations) shows how to use these contexts in your data segment in a Vega-Lite specification in Kibana.

If you encounter any particular errors let us know and we'll do our best to help!

---

<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 7, 2024, 1:20pm UTC](https://discuss.elastic.co/t/how-can-you-create-reusable-vega-lite-components/366246/5 "2024-10-07T13:20:14Z")

</div>

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