We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

Angular heat map

Explore patterns and trends in your data and show the most important points in a form of a heat map.


    import { Component, OnInit } from "@angular/core";
    
    import * as tinycolor from "tinycolor2";
    
    const colorScheme: string[] = [
    	"#DF3800",
    	"#FF6D1E",
    	"#FF9900",
    	"#FFB600",
    	"#A5CE31",
    	"#6CBD05",
    	"#00A45A",
    ];
    
    const minValue: number = 0;
    const maxValue: number = 15000;
    
    @Component({
      selector: "pivotComponent",
      templateUrl: "./pivot.component.html",
      styleUrls: ["./pivot.component.css"],
    })
    export class PivotComponent implements OnInit {
      public report: Flexmonster.Report = {
        dataSource: {
          type: "csv",
          filename: "data/sales.csv",
        },
        slice: {
          rows: [
            {
              uniqueName: "Month",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          columns: [
            {
              uniqueName: "Category",
              levelName: "Product Name",
              filter: {
                members: [
                  "category.[condiments].[bbq sauce]",
                  "category.[breakfast cereals].[corn flakes]",
                  "category.[confectionery]",
                  "category.[bakery].[chocolate biscuits]",
                  "category.[fruit preserves].[apple jam]",
                  "category.[bakery].[apple cake]",
                  "category.[soups].[tomato soup]",
                ],
              },
            },
          ],
          measures: [
            {
              uniqueName: "Revenue",
              aggregation: "sum",
              format: "currency",
            },
          ],
        },
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 2,
          },
          {
            name: "currency",
            currencySymbol: "$",
          },
        ],
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
        if (data?.type === "value" && !data?.isGrandTotal) {
          let backgroundColor = this.getColorFromRange(data.value as number);
          let textShadowColor = tinycolor(backgroundColor).darken(15).toString();
          let borderColor = tinycolor(backgroundColor).darken(3).toString();
    
          cell.style = {
            ...cell.style,
            "background-color": backgroundColor,
            "color": "white",
            "font-weight": "bold",
            "text-shadow": `0px 2px 3px ${textShadowColor}`,
            "border-bottom": `1px solid ${borderColor}`,
            "border-right": `1px solid ${borderColor}`,
          };
        }
      }
    
      getColorFromRange(value: number) {
        if (isNaN(value)) {
          value = minValue;
        }
        value = Math.max(minValue, Math.min(value, maxValue));
        let perc = (minValue + value) / maxValue;
        let colorIdx = Math.round((colorScheme.length - 1) * perc);
        return colorScheme[colorIdx];
      }
    }
    
    <fm-pivot
      [componentFolder]="'https://cdn.flexmonster.com/'"
      [height]="600"
      [report]="report"
      [customizeCell]="customizeCellFunction.bind(this)">
    </fm-pivot>
    

    Creating a heat map visualization in Angular is simple to do with our Flexmonster API: define a range of colors and apply cell formatting based on their values. A detailed guide on how to create a heat map and apply it to the business data you can find in our blog.

    The end-user can also apply conditional formatting to highlight insights in his report on the fly. Refer to the Extended grid customization guide to find out about other ways to customize our Angular pivot table: alternate row colors, represent numbers by icons, add hyperlinks to cells, and a lot more.