TreeMap error

Webix JS
#1

Hello,

I’m using treemap for my project and I met an anormal functionnality.

When I use TreeMap with container, my application blocks.

In sample https://snippet.webix.com/2de536ac, I add "<div id="div1" /> in html code and add container: "div1" in js code. With this modifications, application is block.

Is it normal ? What is the solution for unblock my application ?

Thanks,

Charly

HTML code :

<div id="div1"/>

JS code :

//plain json data, based on objects
webix.ui({
  container: "div1",
  rows:[
    { view: "toolbar", height: 35, elements:[
      {view: "label", label: "TreeMap"}
    ]
    },
    {
      view:"treemap",
      select: true,
      template: function(item){
        return item.label||"";
      },
      value: "#value#",
      data: [
        { id:"1", label: "Technology", data:[
          { id:"1.1", value:"50" },
          { id:"1.2", value:"30" },
          { id:"1.3", value:"20" }
        ]},
        { id:"2", label: "Healthcare", data:[
          { id:"2.1", value:"80" },
          { id:"2.2", value:"10" },
          { id:"2.3", value:"60" },
          { id:"2.4", value:"5" },
          { id:"2.5", value:"8" }
        ]},
        { id:"3", label: "Basic Materials", data:[
          { id:"3.1", value:"5" },
          { id:"3.2", value:"7" },
          { id:"3.3", value:"10" }
        ]},
        { id:"4", label: "Financial", data:[
          { id:"4.1", value:"100" },
          { id:"4.2", value:"15" },
          { id:"4.3", value:"20" }
        ]},
        { id:"5", label: "Consumer Goods", data:[
          { id:"5.1", value:"4" },
          { id:"5.2", value:"10" },
          { id:"5.3", value:"5" }
        ]},
        { id:"6", label: "Industrial Goods", data:[
          { id:"6.1", value:"20" },
          { id:"6.2", value:"5" },
          { id:"6.3", value:"9" }
        ]}
      ]
    }
  ]
  
});
#2

Hello,

You need to define the size of the container (because the height becomes equal 0).
Also, it’s important: the container to initialize a component in should exist in the DOM before initialization.
Please check the example: Code Snippet

#3

Thanks Nastja, it works :smile: