Need a special offer?Find out if your project fits.
+
List of all demos

Highlight trends in your data and show what matters most using a heat map.


    const pivot = new Flexmonster({
      container: "pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 600,
      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: "$",
          },
        ],
      },
      customizeCell: customizeCellFunction,
    });
    
    const colorScheme = [
      "#DF3800",
      "#FF6D1E",
      "#FF9900",
      "#FFB600",
      "#A5CE31",
      "#6CBD05",
      "#00A45A",
    ];
    
    const minValue = 0;
    const maxValue = 15000;
    
    function customizeCellFunction(cell, data) {
      if (data && data.type === "value" && !data.isGrandTotal) {
        let backgroundColor = getColorFromRange(data.value);
        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}`,
        };
      }
    }
    
    function getColorFromRange(value) {
      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];
    }
    
    <div id="pivot-container"></div>
    

    To build the heat map, define a color scale, and change cell coloring based on their values — it is easy to do with Flexmonster API. Refer to our blog post to find out more details on how to create a heat map and apply it to your business data. We have got you covered there.

    Refer to the Customizing the grid guide to try more ways to customize the pivot table: alternate row colors, represent numbers by icons, add hyperlinks to cells, and more.