syncfusion-react-heatmap

Install @syncfusion/ej2-react-heatmap, import the material.css theme, and render HeatMapComponent with a dataSource, xAxis and yAxis labels. Inject Legend and Tooltip services to enable those features.

Pass an array of objects with row, column, and value fields to dataSource, then set dataSourceSettings with xDataMapping, yDataMapping, and valueMapping. Use categorical axes so labels are extracted automatically.

Yes, set renderingMode to Canvas for datasets over 1000 cells to render as a bitmap instead of SVG DOM elements. Auto mode switches rendering based on cell count, and disabling tooltips further improves performance.

Missing theme CSS is the most common cause; import @syncfusion/ej2-base/styles/material.css in your entry file. Also verify dataSource is non-empty and the container element has explicit width and height.

Use paletteSettings with gradient or fixed color entries mapped to values, and customize tooltips via tooltipSettings or the tooltipRender event. The cellRender event lets you modify display text and cell styling per cell.