# Kibana Custom visualisation plugin resize issue **URL:** \ **Category:** Kibana\ **Created:** [September 27, 2017, 5:18am UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926 "2017-09-27T05:18:51Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![PRANSHU\_MIDHA](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pranshu_midha/32/22533_2.png) [@PRANSHU\_MIDHA](https://discuss.elastic.co/u/PRANSHU_MIDHA)\ **Post date:** [September 27, 2017, 5:18am UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/1 "2017-09-27T05:18:51Z")
Hi I am developing a custom plugin for visualisation, but the issue is that in the dashboard when I resize the plugin, the size of my visualisation doesn't change with the container. As an alternative I've set a watcher on the draggable container's CSS as whenever the height or width of the container changes, it pipes the values to my plugin and size of my visualisation changes, but it takes an instance of only one container and if there are multiple similar visualisations in the same dashboard then they will be resizing based on one container only. So this is not working out well and also isn't appropriate. Apart from this I am also watching appstate in which I can get some values in this form : { "title": "New Dashboard", "panels": [ { "id": "aaaa", "type": "visualization", "panelIndex": 1, "size\_x": 7, "size\_y": 2, "col": 1, "row": 1 }, { "id": "Testing21sep2017", "type": "visualization", "panelIndex": 2, "size\_x": 3, "size\_y": 2, "col": 8, "row": 1 }, { "id": "test", "type": "visualization", "panelIndex": 3, "size\_x": 6, "size\_y": 2, "col": 1, "row": 3 } ], "options": { "darkTheme": false }, "uiState": {}, "query": { "query\_string": { "query": "\*", "analyze\_wildcard": true } }, "filters": [] } I can use the size\_x and size\_y inside panels but can't map it with a value where I can detect that this is my custom visualisation's object. Please help me out. ---
**Author:** ![chrisronline](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chrisronline/32/28230_2.png) [@chrisronline](https://discuss.elastic.co/u/chrisronline)\ **Post date:** [September 27, 2017, 6:49pm UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/2 "2017-09-27T18:49:40Z")
Hi @PRANSHU_MIDHA, We can definitely help you with that. @thomasneirynck will add some more information later today. Thanks, Chris ---
**Author:** ![PRANSHU\_MIDHA](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pranshu_midha/32/22533_2.png) [@PRANSHU\_MIDHA](https://discuss.elastic.co/u/PRANSHU_MIDHA)\ **Post date:** [September 28, 2017, 11:30am UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/3 "2017-09-28T11:30:12Z")
Thank you @chrisronline . I'll be looking forward to it.😃 ---
**Author:** ![JuanCarniglia](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/juancarniglia/32/11154_2.png) [@JuanCarniglia](https://discuss.elastic.co/u/JuanCarniglia)\ **Post date:** [September 28, 2017, 3:17pm UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/4 "2017-09-28T15:17:45Z")
Have you tried to simply set the Visualization Width/Height to 100%? ---
**Author:** ![PRANSHU\_MIDHA](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pranshu_midha/32/22533_2.png) [@PRANSHU\_MIDHA](https://discuss.elastic.co/u/PRANSHU_MIDHA)\ **Post date:** [September 29, 2017, 4:04am UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/5 "2017-09-29T04:04:18Z")
Hi @JuanCarniglia, I am actually using a directive for my visualisation which only takes integer as an input so giving height and width 100% won't be an option for me. You can check the directive I am using here : [jQCloud](https://github.com/lucaong/jQCloud) ---
**Author:** ![JuanCarniglia](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/juancarniglia/32/11154_2.png) [@JuanCarniglia](https://discuss.elastic.co/u/JuanCarniglia)\ **Post date:** [September 29, 2017, 12:31pm UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/6 "2017-09-29T12:31:59Z")
Ok, it was just a thought. Maybe you can get that integer by querying the width/height of its parent (Something like varwidth = parseInt($( "#visualizationid").parent().width()); and then use that. ---
**Author:** ![PRANSHU\_MIDHA](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pranshu_midha/32/22533_2.png) [@PRANSHU\_MIDHA](https://discuss.elastic.co/u/PRANSHU_MIDHA)\ **Post date:** [September 29, 2017, 1:44pm UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/7 "2017-09-29T13:44:22Z")
Well that's an idea, I'll surely try it. ---
**Author:** ![PRANSHU\_MIDHA](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pranshu_midha/32/22533_2.png) [@PRANSHU\_MIDHA](https://discuss.elastic.co/u/PRANSHU_MIDHA)\ **Post date:** [September 29, 2017, 2:30pm UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/8 "2017-09-29T14:30:07Z")
HI @JuanCarniglia, I just tried what you said, but when I add two visualisations in same dashboard, it still takes height and width of one parent only and resizes both according to it. ---
**Author:** ![JuanCarniglia](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/juancarniglia/32/11154_2.png) [@JuanCarniglia](https://discuss.elastic.co/u/JuanCarniglia)\ **Post date:** [September 29, 2017, 4:22pm UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/9 "2017-09-29T16:22:41Z")
When you declare your directive, you surely are passing a $element object. Use this object as the root element of the visualization (to get the width / height). ---
**Author:** ![PRANSHU\_MIDHA](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pranshu_midha/32/22533_2.png) [@PRANSHU\_MIDHA](https://discuss.elastic.co/u/PRANSHU_MIDHA)\ **Post date:** [September 30, 2017, 7:24am UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/10 "2017-09-30T07:24:53Z")
I am not doing that right now, but will try for sure. ---
**Author:** ![thomasneirynck](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomasneirynck/32/23313_2.png) [@thomasneirynck](https://discuss.elastic.co/u/thomasneirynck)\ **Post date:** [October 2, 2017, 2:09pm UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/11 "2017-10-02T14:09:55Z")
Hi @PRANSHU_MIDHA, if you're writing a plugin as a angular controller, you can listen to the 'resize' event on the scope. You can see an example of that here: [https://github.com/thomasneirynck/kibana/blob/185fb4cc1a5e9740a218ebc809cc61c847c09e3c/src/core\_plugins/tagcloud/public/tag\_cloud\_controller.js](https://github.com/thomasneirynck/kibana/blob/185fb4cc1a5e9740a218ebc809cc61c847c09e3c/src/core_plugins/tagcloud/public/tag_cloud_controller.js) thanks, ---
**Author:** ![PRANSHU\_MIDHA](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/pranshu_midha/32/22533_2.png) [@PRANSHU\_MIDHA](https://discuss.elastic.co/u/PRANSHU_MIDHA)\ **Post date:** [October 9, 2017, 3:53am UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/12 "2017-10-09T03:53:08Z")
Hi @thomasneirynck , I tried to watch the resize event in scope but it works only when visualisation is loaded, otherwise it is not working. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [November 6, 2017, 3:53am UTC](https://discuss.elastic.co/t/kibana-custom-visualisation-plugin-resize-issue/101926/13 "2017-11-06T03:53:40Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.