# How can i create Custom visualization and add as a plugin in kibana

**URL:** <https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826>\
**Category:** Kibana\
**Created:** [May 7, 2018, 11:32am UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826 "2018-05-07T11:32:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![yash\_mangla](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/yash_mangla/32/25889_2.png) [@yash\_mangla](https://discuss.elastic.co/u/yash_mangla)\
**Post date:** [May 7, 2018, 11:32am UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826/1 "2018-05-07T11:32:03Z")

</div>

Hello Guyz,

this questions is reference of below question.  
[https://discuss.elastic.co/t/how-i-can-add-my-custom-graph-visualization-in-kibana/112223](https://discuss.elastic.co/t/how-i-can-add-my-custom-graph-visualization-in-kibana/112223)

I'm basically 1st trying to understand how data flow and rendering is working. when we wrote a plugins. so I already gone through above link mentioned blogs and documentations. which @ppisljar has provided.

But there are couple of issue i'm facing at initial stage. I thought there might be some syntax mistakes in my code so i replaced my complete code with webinar demo complete source code from GitHub issue repository which is provided by @thomasneirynck at this [URL](https://github.com/elastic/kibana/issues/14726) .

So i extracted those zips so i got these 2 directory.  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/9/5/9521a0fcef84f2cccd1484b1d92840cef022019a.png)

so I just copied "webinar\_visualization" in my `kibana/plugins/` directory.  
and restarted Kibana server. but after restarting server kibana through me such kind of errors.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/0/3/031a5da99db540afab9963fac07be7540c625271.png)  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/f/8/f8cda36ba56e4d7ac53c77ba605781a3421b2d61.png)

I'm stuck with this internal things kindly help to resolve this so atleast i can quickly kick start with my with my visualization.

Regards,  
Yash M.

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [May 7, 2018, 1:33pm UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826/2 "2018-05-07T13:33:29Z")

</div>

what version of kibana are you running ?

---

<div class="post-metadata">

**Author:** ![yash\_mangla](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/yash_mangla/32/25889_2.png) [@yash\_mangla](https://discuss.elastic.co/u/yash_mangla)\
**Post date:** [May 8, 2018, 5:29am UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826/3 "2018-05-08T05:29:14Z")

</div>

In my system i have  
- node version (v8.6.0)  
- npm version (5.3.0)  
- ELK version (6.2.3)  
- Chrome version (Version 66.0)

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [May 8, 2018, 12:45pm UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826/4 "2018-05-08T12:45:47Z")

</div>

that example only works with 6.0

to see a working example for 6.2 check one of the core plugins, markdown is probably the simplest one, or metric visualization

---

<div class="post-metadata">

**Author:** ![yash\_mangla](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/yash_mangla/32/25889_2.png) [@yash\_mangla](https://discuss.elastic.co/u/yash_mangla)\
**Post date:** [May 9, 2018, 8:20am UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826/5 "2018-05-09T08:20:00Z")

</div>

thanks @ppisljar ,

I just checked one or two core plugins. I thought that's the problem because kibana is switched from ECMA5 to ECMA6.

I just have little query on data model and rendering part.

Basically, when I'm trying to put my Custom Visualization module in plugin. and my visualization expecting some specific format data only. so,

1. In which file we have edit to change the default data model to expected model of visualization.
2. Where we will write our rendering visualization rendering mechanism for visualization.

Can you give little direction to me..

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [May 9, 2018, 12:40pm UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826/6 "2018-05-09T12:40:18Z")

</div>

I don't really understand the question, but the resources suggested in [How I can add my custom graph visualization in kibana](https://discuss.elastic.co/t/how-i-can-add-my-custom-graph-visualization-in-kibana/112223)

together with recent code (like current markdown or metric visualization) should help you get started.

things didn't change much since 6.0, but there were some minor changes, but you should be able to spot those from our current code. (maybe even compare metric code between versions ... however it was ported to react lately, so that might complicate stuff a bit)

in general we no longer recommend writing your visualizations in angular, as we are migrating away from it.

---

<div class="post-metadata">

**Author:** ![yash\_mangla](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/yash_mangla/32/25889_2.png) [@yash\_mangla](https://discuss.elastic.co/u/yash_mangla)\
**Post date:** [May 21, 2018, 12:12pm UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826/7 "2018-05-21T12:12:10Z")

</div>

Hi @ppisljar,

> [@ppisljar](#):
>
> in general we no longer recommend writing your visualizations in angular, as we are migrating away from it.

Could you please let me know what language you currently support to write our own visualization. ?

> [@ppisljar](#):
>
> I don't really understand the question, but the resources suggested in [How I can add my custom graph visualization in kibana](https://discuss.elastic.co/t/how-i-can-add-my-custom-graph-visualization-in-kibana/112223)

Basically, every visualization expect some specific data structure like whether it is flat/nested json data we are getting from REST API. i just want to know if we going to write our visualization is there any specific object which we can manipulate on run-time rendering ?

---

<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:** [June 18, 2018, 12:22pm UTC](https://discuss.elastic.co/t/how-can-i-create-custom-visualization-and-add-as-a-plugin-in-kibana/130826/8 "2018-06-18T12:22:20Z")

</div>

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