# Kibana custom plugin breaks the interface

**URL:** <https://discuss.elastic.co/t/kibana-custom-plugin-breaks-the-interface/167450>\
**Category:** Kibana\
**Created:** [February 7, 2019, 12:44pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-breaks-the-interface/167450 "2019-02-07T12:44:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hegusung](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hegusung/32/47826_2.png) [@hegusung](https://discuss.elastic.co/u/hegusung)\
**Post date:** [February 7, 2019, 12:44pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-breaks-the-interface/167450/1 "2019-02-07T12:44:58Z")

</div>

Hello,

I am trying to code a custom visualization on Kibana 6.6.1, however, the plugin registration breaks the interface.

 ![xsnap-07022019_133311](https://us1.discourse-cdn.com/elastic/original/3X/e/b/eb9c90360a62b87a777e092f2721af089145f35b.png)

The code is extremely simple since for the moment I only generated the plugin with the plugin generator and tried to register the new visualization.

**index.js**  
import exampleRoute from './server/routes/example';

```
export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'custom_export',
    uiExports: {
       visTypes: ['plugins/custom_export/vis']
    },

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },

    init(server, options) { // eslint-disable-line no-unused-vars
      // Add server routes and initialize the plugin here
      exampleRoute(server);
    }
  });
}

```

**public/vis.js**  
import { VisFactoryProvider } from 'ui/vis/vis\_factory';  
import { VisTypesRegistryProvider } from 'ui/registry/vis\_types';

```
const CustomExportVis = (Private) => {
  const VisFactory = Private(VisFactoryProvider);

  return VisFactory.createBaseVisualization({
    name: 'custom_export',
    title: 'Custom export',
    icon: 'fa_tachometer',
    description: 'Custom export button for Kibana',
  });
}
VisTypesRegistryProvider.register(CustomExportVis);

```

For information removing the line "VisTypesRegistryProvider.register(CustomExportVis);" makes the interface work but not the plugin (obviously). I see no errors in the log output.

Why is the interface reacting this way?

---

<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:** [February 7, 2019, 1:14pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-breaks-the-interface/167450/2 "2019-02-07T13:14:07Z")

</div>

not sure what goes wrong,

could you try copying the metric visualization (src/core\_plugins/metric/) and start from there ?  
or can you put your whole code somewhere so i can easily test it out ?

thanks

---

<div class="post-metadata">

**Author:** ![hegusung](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hegusung/32/47826_2.png) [@hegusung](https://discuss.elastic.co/u/hegusung)\
**Post date:** [February 7, 2019, 2:57pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-breaks-the-interface/167450/3 "2019-02-07T14:57:00Z")

</div>

I managed to move the metric\_vis plugin, but no way to make my code work from there, I will try again when I have more time...

I put the code here:

> **[hegusung/custom\_export](https://github.com/hegusung/custom_export)**
>
> Kibana export button visualisation. Contribute to hegusung/custom\_export development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![hegusung](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hegusung/32/47826_2.png) [@hegusung](https://discuss.elastic.co/u/hegusung)\
**Post date:** [February 7, 2019, 3:00pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-breaks-the-interface/167450/4 "2019-02-07T15:00:27Z")

</div>

Still Is there some basic plugin visualization code provided by the Kibana dev team ? Because I find the plugin development documentation confusing for new Kibana plugin developers

---

<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:** [March 7, 2019, 3:02pm UTC](https://discuss.elastic.co/t/kibana-custom-plugin-breaks-the-interface/167450/5 "2019-03-07T15:02:51Z")

</div>

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