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

React heat map

Need to build the heat map? Just define a color scale and change cell coloring based on their values — it is easy to do with Flexmonster API.


    import React from "react";
    import * as FlexmonsterReact from "react-flexmonster";
    
    import * as tinycolor from "tinycolor2";
    
    const colorScheme = [
      "#DF3800",
      "#FF6D1E",
      "#FF9900",
      "#FFB600",
      "#A5CE31",
      "#6CBD05",
      "#00A45A",
    ];
    
    const minValue = 0;
    const maxValue = 15000;
    
    class PivotTableDemo extends React.Component {
      render() {
        return (
          <>
            <FlexmonsterReact.Pivot
              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={this.customizeCellFunction}
            />
          </>
        );
      }
    
      customizeCellFunction = (cell, data) => {
        if (data?.type === "value" && !data?.isGrandTotal) {
          let backgroundColor = this.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}`,
          };
        }
      };
    
      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];
      };
    }
    
    export default PivotTableDemo;
    
    

    For more details, check our blog post on creating a heat map and using it for your business data. We have got you covered there.

    You may also need the Customizing the grid guide to try more options to customize the React pivot table: alternate row colors, represent numbers by icons, add hyperlinks to cells, and more.