# How to use visualization directive with Kibana plugin

**URL:** <https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476>\
**Category:** Kibana\
**Created:** [November 14, 2017, 1:07am UTC](https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476 "2017-11-14T01:07:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![drumn](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@drumn](https://discuss.elastic.co/u/drumn)\
**Post date:** [November 14, 2017, 1:07am UTC](https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476/1 "2017-11-14T01:07:04Z")

</div>

I want to run Visualize's sample code using the visualization directive described below with kibana 6.0.0-rc2.  
Although no error is output to the server console or the browser console,  
Visualize is not displayed and it is a completely white screen.

[https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html](https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html)

The code is as below.

・index.html

```
<div ng-controller="KbnTestController" class="test_vis">
  <visualization vis='vis' vis-data='visData'></visualize>
</div>

```

・app.js

```
import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';
import template from './template/index.html';
import { VisProvider } from 'ui/vis';
import './less/app.less';
import 'ui/courier';
import 'ui/modals';

uiRoutes.enable();
uiRoutes
.when('/', {
  template
});

uiModules.get('kibana')
.controller('KbnTestController', function ($scope, Private) {
  const Vis = Private(VisProvider);
  const visConfig = {
    type: 'metric'
  };
  $scope.vis = new Vis('b9e56600-a27d-11e7-94dc-eb7c16196973', visConfig);
  $scope.visData = [{ columns: [{ title: 'Count' }], rows: [[1024], [256]] }];
});

```

・app.less

```
@import (reference) "~ui/styles/mixins.less";

.test_vis-app {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.test_vis, visualize, visualization {
  display: flex;
  flex: 1 1 100%;
}

```

Please tell me how you can fix Visualize if you modify it.  
Thank you.

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [November 14, 2017, 8:52pm UTC](https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476/2 "2017-11-14T20:52:52Z")

</div>

Hey @drumn, the code you pasted looks a lot like the code for a custom application, not the code for a custom visualization. Have you tried using [https://github.com/elastic/template-kibana-plugin/](https://github.com/elastic/template-kibana-plugin/) to generate a custom visualization plugin? (NOT a custom app plugin)

---

<div class="post-metadata">

**Author:** ![drumn](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@drumn](https://discuss.elastic.co/u/drumn)\
**Post date:** [November 14, 2017, 10:14pm UTC](https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476/3 "2017-11-14T22:14:18Z")

</div>

Thank you for your reply.

The code shown is based on the template created by "sao kibana-plugin" command.

If you have a set of sample code that actually displays Visualize using Visualization directive, please let me know.

Thank you.

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [November 14, 2017, 10:22pm UTC](https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476/4 "2017-11-14T22:22:06Z")

</div>

Ah, didn’t realize the generator doesn’t support creating custom visualization types. Try checking out [https://github.com/nreese/kibana-time-plugin](https://github.com/nreese/kibana-time-plugin), it’s a great interactive custom visualization. The key is defining a uiExport for your vis type and using the right APIs to extend the custom vis type registry.

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [November 14, 2017, 10:23pm UTC](https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476/5 "2017-11-14T22:23:26Z")

</div>

[https://www.elastic.co/guide/en/kibana/master/development-create-visualization.html](https://www.elastic.co/guide/en/kibana/master/development-create-visualization.html) might be a better doc to follow

---

<div class="post-metadata">

**Author:** ![drumn](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@drumn](https://discuss.elastic.co/u/drumn)\
**Post date:** [November 15, 2017, 12:13am UTC](https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476/6 "2017-11-15T00:13:02Z")

</div>

Thank you for your early reply.  
I will check the URL you taught.

Will there be plans for the generator to support the creation of custom visualization types in the future?  
I strongly hope to support it!

---

<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:** [December 13, 2017, 12:13am UTC](https://discuss.elastic.co/t/how-to-use-visualization-directive-with-kibana-plugin/107476/7 "2017-12-13T00:13:15Z")

</div>

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