# How to use the visualization plugin in a react component? **URL:** \ **Category:** Kibana\ **Tags:** kibana-plugin-development\ **Created:** [June 9, 2021, 6:29pm UTC](https://discuss.elastic.co/t/how-to-use-the-visualization-plugin-in-a-react-component/275484 "2021-06-09T18:29:35Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Manuel\_Pedro\_Gomez\_C](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/manuel_pedro_gomez_c/32/90079_2.png) [@Manuel\_Pedro\_Gomez\_C](https://discuss.elastic.co/u/Manuel_Pedro_Gomez_C)\ **Post date:** [June 9, 2021, 6:29pm UTC](https://discuss.elastic.co/t/how-to-use-the-visualization-plugin-in-a-react-component/275484/1 "2021-06-09T18:29:35Z")
Hello! I recently joined a project which is developing a plugin for Kibana, in this project, we use the Visualizations plugin to generate some presentations using data stored in ES indices. I'm trying to understand better how it works and how to improve on it, for that I have a few questions about the start methods defined in the visualization plugin [kibana/plugin.ts at 7.13 · elastic/kibana · GitHub](https://github.com/elastic/kibana/blob/7.13/src/plugins/visualizations/public/plugin.ts) The `createVis` method takes two arguments, a `visType` and a `visState`. I think I understand the `visType`, but where can I learn more about the `visState` objects? Like what they contain, what are they used for, etc. Im also not sure how the return of the `createVis` function can be used, how would show the visualization in my page with a react component? And what are the methods `convertToSerializedVis` and `convertFromSerializedVis` ? What is a `serializedVis` and how can I use them? ---
**Author:** ![Aaron\_Caldwell](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron_caldwell/32/45755_2.png) [@Aaron\_Caldwell](https://discuss.elastic.co/u/Aaron_Caldwell)\ **Post date:** [June 9, 2021, 9:58pm UTC](https://discuss.elastic.co/t/how-to-use-the-visualization-plugin-in-a-react-component/275484/2 "2021-06-09T21:58:11Z")
Hello Manuel, The Kibana team has been working to switch over to Typescript over the last couple of years, and at this point we have pretty good coverage! This means you can look at a variable like `visState` and see its type attributes to understand what it is and how it should be used. For example, I see `visState` is of interface type `SerializedVis`, and has the attributes listed [here](https://github.com/elastic/kibana/blob/master/src/plugins/visualizations/public/vis.ts#L42-L42). Rather than dive into the specifics of `createVis`, `convertToSerializedVis` and `convertFromSerializedVis`, I'll tell you how I might approach seeing how they're used in the code: - Get a good editor or IDE like VS Code, Intellij, etc. - Most good editors/IDEs will have some options for intellisense or something similar so you can right-click on a variable and see usage elsewhere in the codebase. Minimally you can do a "find all" in the project and probably still get some good results - Look at tests where these variables are mocked and see how they're used Hope that gets the ball rolling for you! Regards, Aaron ---
**Author:** ![Manuel\_Pedro\_Gomez\_C](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/manuel_pedro_gomez_c/32/90079_2.png) [@Manuel\_Pedro\_Gomez\_C](https://discuss.elastic.co/u/Manuel_Pedro_Gomez_C)\ **Post date:** [June 11, 2021, 8:47am UTC](https://discuss.elastic.co/t/how-to-use-the-visualization-plugin-in-a-react-component/275484/3 "2021-06-11T08:47:29Z")
Ok, there is more to read on how to render them by seeing how they are used, that's a help. But on the `visState` there is still a property I don't understand. `params` takes a type `VisParams` but `VisParams` is defined like this ```auto export interface VisParams { [key: string]: any; } ``` I know this is because each visualization has their own kind of params, but is there anywhere I can read about those params for the types defined in kibana by default? Also, I was asked if presenting custom data that is not present in a ES index is possible, just inputting the raw data to the visualization plugin, is it? ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [July 9, 2021, 8:48am UTC](https://discuss.elastic.co/t/how-to-use-the-visualization-plugin-in-a-react-component/275484/4 "2021-07-09T08:48:22Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.