# Custom Visualization in Typescript not showing up in New Visualization list

**URL:** <https://discuss.elastic.co/t/custom-visualization-in-typescript-not-showing-up-in-new-visualization-list/213939>\
**Category:** Kibana\
**Created:** [January 6, 2020, 7:18pm UTC](https://discuss.elastic.co/t/custom-visualization-in-typescript-not-showing-up-in-new-visualization-list/213939 "2020-01-06T19:18:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![illeatmyhat](https://avatars.discourse-cdn.com/v4/letter/i/f475e1/32.png) [@illeatmyhat](https://discuss.elastic.co/u/illeatmyhat)\
**Post date:** [January 6, 2020, 7:18pm UTC](https://discuss.elastic.co/t/custom-visualization-in-typescript-not-showing-up-in-new-visualization-list/213939/1 "2020-01-06T19:18:14Z")

</div>

I made an extremely basic visualization using Typescript but it won't show up in the list of visualizations I can create.  
I generated the plugin using `node scripts/generate_plugin my_plugin` without any additional generated components.  
I used the [Markdown plugin as a reference](https://github.com/elastic/kibana/blob/7.4/src/legacy/core_plugins/vis_type_markdown/public/markdown_vis.ts)

Does anyone have a basic example of an actually working custom kibana visualization using typescript?  
`index.js`:

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

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

```

`vis_type.tsx`:

```auto
import React from 'react';
// @ts-ignore
import { visFactory } from 'ui/vis/vis_factory';

const Editor = () => <p>hello editor</p>
const Visualization = () => <p>hello visualization</p>

export const CustomVisType = visFactory.createReactVisualization({
  name: 'my_plugin',
  title: 'My Plugin',
  icon: 'graphApp',
  isAccessible: true,
  description: 'A really basic plugin',
  visConfig: { 
    component: Visualization,
    defaults: {}
  },
  editor: 'default',
  editorConfig: {
    optionTabs: [
      {
        name: 'editor',
        title: 'Editor',
        editor: Editor
      }
    ],
    enableAutoApply: true,
  },
  requestHandler: 'none',
  responseHandler: 'none',
});

```

---

<div class="post-metadata">

**Author:** ![illeatmyhat](https://avatars.discourse-cdn.com/v4/letter/i/f475e1/32.png) [@illeatmyhat](https://discuss.elastic.co/u/illeatmyhat)\
**Post date:** [January 6, 2020, 7:31pm UTC](https://discuss.elastic.co/t/custom-visualization-in-typescript-not-showing-up-in-new-visualization-list/213939/2 "2020-01-06T19:31:14Z")

</div>

It turns out that the visualization wasn't registered.  
That'll teach me to rely on built-in plugins as a reference.  
Referenced the [test plugin](https://github.com/elastic/kibana/blob/7.4/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js) to fix it  
Fixed `vis_type.tsx`

```auto
import React from 'react';
// @ts-ignore
import { visFactory } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

const Editor = () => <p>hello editor</p>
const Visualization = () => <p>hello visualization</p>

VisTypesRegistryProvider.register(() => visFactory.createReactVisualization({
  name: 'my_plugin',
  title: 'My Plugin',
  icon: 'graphApp',
  isAccessible: true,
  description: 'A really basic plugin',
  visConfig: { 
    component: Visualization,
    defaults: {}
  },
  editor: 'default',
  editorConfig: {
    optionTabs: [
      {
        name: 'editor',
        title: 'Editor',
        editor: Editor
      }
    ],
    enableAutoApply: true,
  },
  requestHandler: 'none',
  responseHandler: 'none',
}));

```

---

<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 3, 2020, 7:43pm UTC](https://discuss.elastic.co/t/custom-visualization-in-typescript-not-showing-up-in-new-visualization-list/213939/3 "2020-02-03T19:43:16Z")

</div>

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