angulartreemapignite-ui-angular

How to change color of branch level nodes in Ignite UI angular tree map?


I have implemented the treemap using the below link which worked perfectly fine.But i want to change the color of branch nodes based on parent id.

https://www.infragistics.com/products/ignite-ui-angular/angular/components/treemap-overview.html

https://stackblitz.com/angular/gxolroyrbgb

Each continent in the above example should have different color from other.


Solution

  • you can use the nodeStyling event:

       <igx-treemap
                #treeMap
                height="100%"
                width="100%"
                parentIdMemberPath="parent"
                idMemberPath="id"
                labelMemberPath="name"
                valueMemberPath="pop"
                transitionDuration="500"
                (nodeStyling)="nodeStyling($event)"
                rootTitle="Countries">
       </igx-treemap>
    

    with event handler:

    public nodeStyling(ev: { sender: IgxTreemapComponent, args: IgxTreemapNodeStylingEventArgs }): void {
          if (this._map == null) {
            //Colors from www.ColorBrewer.org by Cynthia A. Brewer, Geography, Pennsylvania State University
            this._map = new Map<string, string>();
            this._map.set("Asia", "rgba(179, 88, 6, 1)");
            this._map.set("North_America", "rgba(224, 130, 20, 1)");
            this._map.set("Middle_East__North_Africa__and_Greater_Arabia", "rgba(253, 184, 99, 1)");
            this._map.set("Europe", "rgba(254, 224, 182, 1)");
            this._map.set("Central_America_and_the_Caribbean", "rgba(216, 218, 235, 1)");
            this._map.set("South_America", "rgba(178, 171, 210, 1)");
            this._map.set("Africa", "rgba(128, 115, 172, 1)");
            this._map.set("Australia_and_Oceania", "rgba(84, 39, 136, 1)");
          }
          var parent = ev.args.item.parent || ev.args.item.id;
    
          if (this._map.has(parent)) {
            if (ev.args.style) {
    
              ev.args.style.fill = this._map.get(parent);
            }
          }
        }
    

    as demonstrated here: https://stackblitz.com/edit/angular-d4fvgb

    Note, in this version of the product you need to import another module to use this event, but this shouldn't be required in the future:

    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
            IgxTreemapModule,
        IgxTreemapNodeStyleDynamicModule,
            IgxButtonModule
      ],
    

    Hope this helps!