# Render visualize in a Kibana plugin

**URL:** https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204
**Category:** Kibana
**Created:** [April 15, 2020, 8:55pm UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204 "2020-04-15T20:55:37Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)
#### Post date: [April 15, 2020, 8:55pm UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204/1 "2020-04-15T20:55:37Z")

</div>

Hello guys,

I'm writing a kibana plugin, and as requirements I should render some visualizations.

Using the code below I can see the visualize rendered correctly.

```auto
import { start as embeddables } from "plugins/embeddable_api/np_ready/public/legacy";
...
...
      const visParams = {
        timeRange: { from: "now-1M", to: "now", mode: "quick" },
        filters: [],
        query: {},
      };

      let factory;
      if (!factory) {
        factory = embeddables.getEmbeddableFactory("visualization");
      }

      const visHandler = await factory.createFromSavedObject(
        visId,
        visParams
      );

      visHandler.render(this.node)

```

The main problem is after the **render** method. After it, I can notice a refresh of the webpage that makes me changes the browser url (to the base url of plugin), whitout changing the current view.

Does anyone know what the problem might be?

Regards,  
Nicola

---

<div class="post-metadata">

### Author: ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)
#### Post date: [April 16, 2020, 3:28pm UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204/2 "2020-04-16T15:28:45Z")

</div>

What visualization are you trying to render? Could you share the saved object?

---

<div class="post-metadata">

### Author: ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)
#### Post date: [April 16, 2020, 3:50pm UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204/3 "2020-04-16T15:50:32Z")

</div>

Hi @flash1293,

the problem occurs with any visualizations (vega, classic pie chart etc etc..)

---

<div class="post-metadata">

### Author: ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)
#### Post date: [April 20, 2020, 7:40am UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204/4 "2020-04-20T07:40:49Z")

</div>

I tested this with a dummy plugin and can't reproduce the problem. It's likely related to the rest of your plugin. Could you share it on Github or other means so it's possible to reproduce the issue?

Also, what version of Kibana are you targetting?

---

<div class="post-metadata">

### Author: ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)
#### Post date: [April 20, 2020, 8:48am UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204/5 "2020-04-20T08:48:26Z")

</div>

I'm using v7.6.2

Unfortunately, I can't share on GitHub the code ☹  
Instead, could you please share your dummy plugin ?

Thanks in advance,  
Nicola

---

<div class="post-metadata">

### Author: ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)
#### Post date: [April 20, 2020, 10:58am UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204/6 "2020-04-20T10:58:54Z")

</div>

Maybe I found the source problem...  
Inside the plugin I used _react-router-dom_ for routing. In the moment I want to render visualizations I open a new view using _useHistory_ with:

```auto
import { useHistory } from "react-router-dom";
import chrome from "ui/chrome";
...
  let history = useHistory();
  history.push(chrome.addBasePath(path));
....

```

If I apply the url in the browser manually, all is fine, I don't see any refresh.  
If I go in that url by code, I see the refresh.

It seems to be a problem related to react-router-dom..

---

<div class="post-metadata">

### Author: ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)
#### Post date: [April 20, 2020, 11:40am UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204/7 "2020-04-20T11:40:16Z")

</div>

Good catch. In my dummy plugin I didn't use `react-router-dom`.

---

<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: [May 18, 2020, 11:40am UTC](https://discuss.elastic.co/t/render-visualize-in-a-kibana-plugin/228204/8 "2020-05-18T11:40:17Z")

</div>

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