We have updated Flexmonster Software License Agreement, effective as of September 30, 2025 (list of changes)
List of all demos

Angular heat map

Explore patterns and trends in your data and show the most important points on 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: "https://cdn.flexmonster.com/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 with our Flexmonster API: define a range of colors and apply formatting to cells based on their values. Visit our blog post to find a detailed guide on how to create a heat map and apply it to the business data.

    Refer to the Customizing the grid cells 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 more.