☝️Small business or a startup? See if you qualify for our special offer.
+
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.