Loading...
Loading...
Implement Syncfusion React HeatMap Chart component for data visualization. Use this skill when user needs to create heatmaps, visualize 2D data patterns, display matrix data with color gradients, configure axes (numerical/categorical/datetime), implement legends, handle cell selection, apply custom styling, or work with large datasets. Covers installation, data binding, axis configuration, appearance customization, interaction patterns, tooltips, events, and accessibility.
npx skill4agent add syncfusion/react-ui-components-skills syncfusion-react-heatmapcellSettingslegendSettingspaletteSettingsxAxisyAxistitleSettingstooltipSettingsexportprintclearSelectionimport * as React from 'react';
import { HeatMapComponent, Inject, Legend, Tooltip } from '@syncfusion/ej2-react-heatmap';
import '@syncfusion/ej2-base/styles/material.css';
export function App() {
const data = [
[73, 39, 26, 39, 94],
[93, 58, 53, 38, 26],
[54, 39, 26, 40, 42]
];
return (
<HeatMapComponent
id='heatmap'
dataSource={data}
xAxis={{ labels: ['A', 'B', 'C', 'D', 'E'] }}
yAxis={{ labels: ['X', 'Y', 'Z'] }}
showTooltip={true}
cellRender={(args) => {
args.displayText = args.value + '%';
}}
>
<Inject services={[Legend, Tooltip]} />
</HeatMapComponent>
);
}
export default App;// Visualize simple 2D data with default styling
<HeatMapComponent
dataSource={data}
xAxis={{ labels: xLabels }}
yAxis={{ labels: yLabels }}
>
<Inject services={[Legend, Tooltip]} />
</HeatMapComponent>// Apply custom color palette with legend and styled tooltips
<HeatMapComponent
dataSource={data}
paletteSettings={{
type: 'Gradient',
palette: [
{ value: 0, color: '#3498db' },
{ value: 50, color: '#2ecc71' },
{ value: 100, color: '#e74c3c' }
]
}}
legendSettings={{ position: 'Right', width: '150px' }}
showTooltip={true}
tooltipSettings={{
fill: '#F5F5F5',
textStyle: { color: '#333333', size: '13px' },
border: { width: 1, color: '#999999' }
}}
>
<Inject services={[Legend, Tooltip]} />
</HeatMapComponent>// Handle cell selection and display selected data
<HeatMapComponent
dataSource={data}
cellSelected={(args) => {
console.log(`Cell [${args.row}, ${args.column}] selected: ${args.value}`);
}}
cellRender={(args) => {
args.displayText = args.value + ' units';
}}
>
<Inject services={[Legend, Tooltip]} />
</HeatMapComponent>| Prop | Type | Purpose | Example |
|---|---|---|---|
| Array | 2D data array or JSON | |
| Object | Column axis configuration | |
| Object | Row axis configuration | |
| Object | Color palette and gradient configuration | |
| Function | Custom cell formatting | Format display text |
| Function | Selection event handler | Track user selection |
| Object | Legend placement/format | |
| Boolean | Enable/disable tooltips | |
| Object | Tooltip styling (fill, textStyle, border) | |
| String | SVG or Canvas | |