Kibana Custom visualisation plugin resize issue

(Pranshu Midha) #1

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.

(Chris Roberson) #2


We can definitely help you with that.

@thomasneirynck will add some more information later today.


(Pranshu Midha) #3

Thank you @chrisronline . I'll be looking forward to it.:smiley:

(Juan Ignacio Carniglia) #4

Have you tried to simply set the Visualization Width/Height to 100%?

(Pranshu Midha) #5

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

(Juan Ignacio Carniglia) #6

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.

(Pranshu Midha) #7

Well that's an idea, I'll surely try it.

(Pranshu Midha) #8

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.

(Juan Ignacio Carniglia) #9

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).

(Pranshu Midha) #10

I am not doing that right now, but will try for sure.

(Thomas Neirynck) #11


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:


(Pranshu Midha) #12

Hi @thomasneirynck , I tried to watch the resize event in scope but it works only when visualisation is loaded, otherwise it is not working.

(system) #13

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