# Kibana 7.10 custom plugin grayed out in dashboard

**URL:** <https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471>\
**Category:** Kibana\
**Created:** [January 7, 2021, 5:12pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471 "2021-01-07T17:12:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 7, 2021, 5:12pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/1 "2021-01-07T17:12:01Z")

</div>

I've create a test plugin for Kibana 7.10 using logic from a 7.8 plugin. It works fine when I create a visualization using the custom plugin. However, when I add the visualization to a dashboard everything is grayed out and I cannot click on the buttons. Is there some config setting I need to set for my plugin in 7.10 to allow it to work within the dashboard? No error messages are displayed in the console. Here is a screenshot of the visualization:

 ![Screen Shot 2021-01-07 at 10.59.23 AM](https://us1.discourse-cdn.com/elastic/original/3X/8/8/88938562cc3ed1aa9d00768850374d82ee21dd04.png)

And here it is loaded in a dashboard:

 ![Screen Shot 2021-01-07 at 10.58.54 AM](https://us1.discourse-cdn.com/elastic/original/3X/b/0/b015ec7b39e582d78bc27bd064ab7f8e542c6ebd.png)

---

<div class="post-metadata">

**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:** [January 7, 2021, 6:36pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/2 "2021-01-07T18:36:46Z")

</div>

This is part of the loading state of the embeddable. So your embeddable should set `loading = false` to get full color, on the `EmbeddableOutput` that it provides.

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 7, 2021, 7:01pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/3 "2021-01-07T19:01:27Z")

</div>

I'm currently not using an embeddable object. Can you point me to an example 7.10 plugin that uses this?

---

<div class="post-metadata">

**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:** [January 7, 2021, 7:25pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/4 "2021-01-07T19:25:58Z")

</div>

So you've registered a custom visualization instead. You have two options:

1. `createBaseVisualization` if you are providing a `toExpressionAst`. Your expression is supposed to indicate that it's done rendering using the handlers.
2. `createReactVisualization` if you are using a custom React renderer

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 7, 2021, 7:30pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/5 "2021-01-07T19:30:34Z")

</div>

Yes, I'm creating a React visualization like this:

```auto
export class ExprExamplePlugin implements Plugin<ExprExamplePluginSetup, ExprExamplePluginStart> {
   public setup(core: CoreSetup, setupDeps: SetupDependencies) {
      setupDeps.visualizations.createReactVisualization({
         name: 'test_plugin',
         title: 'Test Plugin',
         icon: visIcon,
         description: 'Test plugin',
         visConfig: {
           component: Visualization,
           defaults: {
           }
         },
         editorConfig: {
           optionsTemplate: Editor,
         },
         requestHandler: 'none'
      });
   }

   public start() { }
   public stop() { }
}

```

---

<div class="post-metadata">

**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:** [January 7, 2021, 7:35pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/6 "2021-01-07T19:35:41Z")

</div>

Does your `Visualization` component call the `renderComplete` prop when it renders?

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 7, 2021, 7:39pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/7 "2021-01-07T19:39:30Z")

</div>

No it does not. I'm assuming that is causing the issue? Do you have some source code example that shows where/how to properly call that prop?

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 7, 2021, 7:47pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/8 "2021-01-07T19:47:14Z")

</div>

Thanks for your help. I got it working by adding the following functions:

```auto
componentDidMount() {
   this.props.renderComplete();
 }

componentDidUpdate() {
   this.props.renderComplete();
 }

```

---

<div class="post-metadata">

**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:** [January 7, 2021, 8:08pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/9 "2021-01-07T20:08:53Z")

</div>

I had to dig around the Kibana source code to figure that out. If you can think of a good place to document this then we'd appreciate a Github issue or pull request

---

<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:** [February 4, 2021, 8:08pm UTC](https://discuss.elastic.co/t/kibana-7-10-custom-plugin-grayed-out-in-dashboard/260471/10 "2021-02-04T20:08:56Z")

</div>

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