CODEWITHSUNDEEP
angulartreemapignite-ui-angular
Siripuram nagendra babu
Siripuram nagendra babu

Reputation: 13

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.

Upvotes: 1

Views: 251

Answers (1)

Graham Murray
Graham Murray

Reputation: 252

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!

Upvotes: 1

Related Questions