# Implementing vega into my custom kibana app **URL:** \ **Category:** Kibana\ **Tags:** vega\ **Created:** [April 20, 2021, 11:57am UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698 "2021-04-20T11:57:13Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![masterThomas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/masterthomas/32/42765_2.png) [@masterThomas](https://discuss.elastic.co/u/masterThomas)\ **Post date:** [April 20, 2021, 11:57am UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698/1 "2021-04-20T11:57:13Z")
Hi team, is it possible to implement Vega chart code into my custom kibana app? I am developing my custom app and want to display some data with Vega Kibana 7.10.0 ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [April 20, 2021, 12:39pm UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698/2 "2021-04-20T12:39:58Z")
Yes. Per the [usage](https://vega.github.io/vega/usage/) you can just use Vega in JavaScript but I am not sure if you would lose/gain anything if you did that since you are using it outside the Kibana scope. Might have to do your own querying for the data and not have access to the filters/dates. @wylie might know that answer. ---
**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\ **Post date:** [April 20, 2021, 2:25pm UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698/3 "2021-04-20T14:25:43Z")
Yes, @aaron-nimocks is right that Vega is a Javascript library that your Kibana app can use in a standalone way, without any of the data fetching/filtering logic that is custom for Kibana. There is also another option which is to use Kibana expressions in very recent versions of Kibana, maybe 7.12.0 and higher. The `vis_type_vega` plugin in Kibana registers a `vega` function to the `expressions` registry in your browser. I would recommend opening the Canvas app and trying to build a `vega visParams="{...}"` expression to see how this works. You can use the `expressions_renderer` code in your own app to display the output to the DOM. There is also an example if you use `--run-examples` when starting Kibana, under the expressions explorer. ---
**Author:** ![masterThomas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/masterthomas/32/42765_2.png) [@masterThomas](https://discuss.elastic.co/u/masterThomas)\ **Post date:** [April 22, 2021, 6:52am UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698/4 "2021-04-22T06:52:37Z")
@wylie , i tried to render some vega snippet and faced some issue below. is there any docs to follow to make it working? ![изображение](https://us1.discourse-cdn.com/elastic/original/3X/b/8/b8764fe5d7f3a4920f5bf9d916906007ed78b33f.png) ---
**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\ **Post date:** [April 22, 2021, 1:59pm UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698/5 "2021-04-22T13:59:58Z")
This is not documented, you'll have to read the source code and get familiar with the `expressions` syntax. Here is the `vega` function definition, looks like it's called `spec` not `visParams`: [kibana/vega\_fn.ts at master · elastic/kibana · GitHub](https://github.com/elastic/kibana/blob/master/src/plugins/vis_type_vega/public/vega_fn.ts) ---
**Author:** ![masterThomas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/masterthomas/32/42765_2.png) [@masterThomas](https://discuss.elastic.co/u/masterThomas)\ **Post date:** [April 23, 2021, 8:51am UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698/6 "2021-04-23T08:51:25Z")
@wylie as i see Vega should be imported in kibana.json as requiredPlugins like below. But what functions shoud i import in "plugins.tsx" from Vega afterwards to make it working? ```auto { "id": "expressionsExplorer", "version": "0.0.1", "kibanaVersion": "kibana", "server": false, "ui": true, "requiredPlugins": ["visTypeVega", "expressions", "inspector", "uiActions", "developerExamples"], "optionalPlugins": [], "requiredBundles": [] } ``` ---
**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\ **Post date:** [April 23, 2021, 2:47pm UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698/7 "2021-04-23T14:47:13Z")
This is a good question but it's a little bit off. I assume you've read about the [kibana plugin lifecycle](https://www.elastic.co/guide/en/kibana/current/kibana-platform-plugin-api.html#_integrating_with_other_plugins). You can use the `expressions.ReactExpressionRenderer` which is used by Lens (there might also be a non-react renderer). The renderer is available during the `start` phase of your plugin, so if you need to register something during `setup` phase that relies on the `start` phase you can register some kind of async function that waits or `core.getStartServices()` on the setup. The ExpressionRenderer uses the registry of expressions, which will include `vega` because you loaded it. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [May 21, 2021, 2:47pm UTC](https://discuss.elastic.co/t/implementing-vega-into-my-custom-kibana-app/270698/8 "2021-05-21T14:47:30Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.