HeatMapComponent
23 Sep 202524 minutes to read
Represents the React HeatMap component.
This is used to customize the properties of the heatmap in order to visualize two-dimensional data, with values represented by gradient or solid color variations.
<HeatMapComponent></HeatMapComponent>
Properties
allowSelection boolean
Enable or disable the selection of cells in heatmap.
import { createRoot } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
return (
<HeatMapComponent id='heatmap' titleSettings={{
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} xAxis={{
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
}} yAxis={{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
}} allowSelection={true} dataSource={heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
Defaults to false
backgroundColor string
Specifies the background color of the entire heatmap.
Defaults to null
cellSettings CellSettingsModel
Sets and gets the options to customize the heatmap cells.
import { createRoot } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
return (<HeatMapComponent id='heatmap' cellSettings={{
showLabel: false
}} dataSource={heatmapData}>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
dataSource Object
Sets and gets the data to visualize in the heatmap.
Defaults to null
dataSourceSettings DataModel
Sets and gets the options to customize the data mapping for the data in the heatmap.
import { createRoot } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
let heatmapData = [
{ Region: 'USA', '2000': 93, '2004': 101, '2008': 112, '2012': 103, '2016': 121 },
{ Region: 'GBR', '2000': 28, '2004': 30, '2008': 49, '2012': 65, '2016': 67 },
{ Region: 'China', '2000': 58, '2004': 63, '2008': 100, '2012': 91, '2016': 70 },
{ Region: 'Russia', '2000': 89, '2004': 90, '2008': 60, '2012': 69, '2016': 55 },
{ Region: 'Germany', '2000': 56, '2004': 49, '2008': 41, '2012': 44, '2016': 42 },
{ Region: 'Japan', '2000': 18, '2004': 37, '2008': 25, '2012': 38, '2016': 41 },
{ Region: 'France', '2000': 38, '2004': 33, '2008': 43, '2012': 35, '2016': 42 },
{ Region: 'KOR', '2000': 28, '2004': 30, '2008': 32, '2012': 30, '2016': 21 },
{ Region: 'Italy', '2000': 34, '2004': 32, '2008': 27, '2012': 28, '2016': 28 }
];
return (<HeatMapComponent id="heatmap" titleSettings={{
text: 'Olympic Medal Achievements of most Successful Countries',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} xAxis={{
labels: [
'China',
'France',
'GBR',
'Germany',
'Italy',
'Japan',
'KOR',
'Russia',
'USA'
],
labelRotation: 45,
labelIntersectAction: 'None'
}} yAxis={{
title: { text: 'Olympic Year' },
labels: ['2000', '2004', '2008', '2012', '2016']
}} dataSource={heatmapData} dataSourceSettings={{
isJsonData: true,
adaptorType: 'Table',
xDataMapping: 'Region'
}} paletteSettings={{
palette: [{ color: '#F0C27B' }, { color: '#4B1248' }]
}} cellSettings={{
border: {
width: 1,
radius: 4,
color: 'white'
}
}} legendSettings={{
visible: false
}} >
<Inject services={[Adaptor, Tooltip, Legend]}/>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
enableHtmlSanitizer boolean
Specifies whether to enable the rendering of untrusted HTML values in the HeatMap. If enableHtmlSanitizer set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
Defaults to false
enableMultiSelect boolean
Enable or disable the multiple selection of cells in heatmap.
Defaults to true
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
height string
Sets and gets the height of the heatmap. The height of the heatmap accepts pixel or percentage values given in string format.
Defaults to null
legendSettings LegendSettingsModel
Sets and gets the options for customizing the legend of the heatmap.
import { createRoot } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
return (<HeatMapComponent id='heatmap' titleSettings={{
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} xAxis={{
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
}} yAxis={{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
}} paletteSettings={{
palette: [
{ value: 0, color: '#C2E7EC' },
{ value: 10, color: '#AEDFE6' },
{ value: 20, color: '#9AD7E0' },
{ value: 30, color: '#72C7D4' },
{ value: 40, color: '#5EBFCE' },
{ value: 50, color: '#4AB7C8' },
{ value: 60, color: '#309DAE' },
{ value: 70, color: '#2B8C9B' },
{ value: 80, color: '#206974' },
{ value: 90, color: '#15464D' },
{ value: 100, color: '#000000' },
]
}} cellSettings={{
showLabel: false
}} dataSource={heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
margin MarginModel
Sets and gets the options to customize left, right, top and bottom margins of the heatmap.
paletteSettings PaletteSettingsModel
Sets and gets the options for customizing the cell color of the heatmap.
renderingMode DrawType
Specifies the rendering mode of heatmap. The following are the available rendering modes.
- SVG - Heatmap is rendered using SVG element.
- Canvas - Heatmap is rendered using Canvas element.
- Auto - Automatically switches the rendering mode based on number of records in the data source.
Defaults to SVG
showTooltip boolean
Enable or disable the visibility of the tooltip for heatmap.
Defaults to true
theme HeatMapTheme
Sets and gets the theme styles supported for heatmap. When the theme is set, the styles associated with the theme will be set in the heatmap.
Defaults to ‘Material’
titleSettings TitleModel
Sets and gets the options to customize the title of the heatmap.
import { createRoot } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
return (<HeatMapComponent id='heatmap' titleSettings={{
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} xAxis={{
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert',
'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
}} yAxis={{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
}} dataSource={heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
tooltipSettings TooltipSettingsModel
Sets and gets the options for customizing the tooltip of the heatmap.
import { createRoot } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
function tooltipRender(args) {
args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
};
return (<HeatMapComponent id="heatmap" titleSettings={{
text: 'Crude Oil Production of Non-OPEC Countries (in Million barrels per day)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} paletteSettings={{
palette: [{ color: '#F0ADCE' }, { color: '#19307B' }]
}} cellSettings={{
showLabel: true
}} tooltipSettings={{
fill: '#696295',
textStyle: {
color: '#FFFFFF',
size: '12px'
},
border: {
width: 2,
color: '#F0C27B'
}
}} showTooltip={true} dataSource={heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
width string
Sets and gets the width of the heatmap. The width of the heatmap accepts pixel or percentage values given in string format.
If specified as ‘100%, heatmap renders to the full width of its parent element.
Defaults to null
xAxis AxisModel
Sets and gets the options to configure the horizontal axis.
yAxis AxisModel
Sets and gets the options to configure the vertical axis.
Methods
clearSelection
This method is used to clear the cell selection in the heatmap.
import { createRoot } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent } from '@syncfusion/ej2-react-heatmap';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
/**
* Heatmap Default sample
*/
function Default() {
let mapInstance: HeatMapComponent;
let heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
function onClick(args) {
mapInstance.clearSelection();
}
return (<div><HeatMapComponent id='heatmap' ref={m => mapInstance = m} dataSource={heatmapData}>
</HeatMapComponent>
<ButtonComponent id="clearSelection" onClick={onClick.bind(this)}>Clear Selection</ButtonComponent></div>
);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
Returns void
destroy
This method destroys the heatmap. This method removes the events associated with the heatmap and disposes the objects created for rendering and updating the heatmap.
import { createRoot } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
/**
* Heatmap Default sample
*/
function Default() {
function onClick(args) {
heatmap.destroy();
}
var heatmap;
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
return (<div><HeatMapComponent id='heatmap' ref={t => (heatmap = t)} titleSettings={{
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} xAxis={{
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
}} yAxis={{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
}} allowSelection={true} dataSource={heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent><ButtonComponent id="clearSelection" onClick={onClick.bind(this)}>Destroy</ButtonComponent ></div>
);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
Returns void
export
This method is used to perform the export functionality for the heatmap.
| Parameter | Type | Description |
|---|---|---|
| type | ExportType |
Specifies the type of the exported file. |
| fileName | string |
Specifies the file name for the exported file. |
| orientation (optional) | PdfPageOrientation |
Specifies the orientation for the exported PDF document. |
Returns void
This method is used to print the rendered heatmap.
Returns void
refresh
Applies all the pending property changes and render the component again.
Returns void
Events
cellClick EmitType<ICellClickEventArgs>
Triggers when clicking on the heatmap cell.
cellDoubleClick EmitType<ICellClickEventArgs>
Triggers when performing the double click operation on the cells in the HeatMap.
cellRender EmitType<ICellEventArgs>
Triggers before each heatmap cell renders.
import { createRoot } from 'react-dom';
import * as React from "react";
import { HeatMapComponent } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
function cellRender(args) {
args.displayText = '$ ' + (args.value / 2) + 'K';
};
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
return (<HeatMapComponent id='heatmap' paletteSettings={{
palette: [
{ value: 0, color: '#C2E7EC' },
{ value: 10, color: '#AEDFE6' },
{ value: 20, color: '#9AD7E0' },
{ value: 30, color: '#72C7D4' },
{ value: 40, color: '#5EBFCE' },
{ value: 50, color: '#4AB7C8' },
{ value: 60, color: '#309DAE' },
{ value: 70, color: '#2B8C9B' },
{ value: 80, color: '#206974' },
{ value: 90, color: '#15464D' },
{ value: 100, color: '#000000' },
]
}} cellSettings={{
showLabel: true
}} cellRender={cellRender.bind(this)} dataSource={heatmapData}
>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
cellSelected EmitType<ISelectedEventArgs>
Triggers when heatmap cell gets selected.
created EmitType<Object>
Triggers after heatmap is completely rendered.
legendRender EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered.
import { createRoot } from 'react-dom';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
function legendRender(args) {
args.text = args.text +'k';
};
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
return (<HeatMapComponent id='heatmap' titleSettings={{
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} xAxis={{
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
}} yAxis={{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
}} paletteSettings={{
palette: [
{ value: 0, color: '#C2E7EC' },
{ value: 10, color: '#AEDFE6' },
{ value: 20, color: '#9AD7E0' },
{ value: 30, color: '#72C7D4' },
{ value: 40, color: '#5EBFCE' },
{ value: 50, color: '#4AB7C8' },
{ value: 60, color: '#309DAE' },
{ value: 70, color: '#2B8C9B' },
{ value: 80, color: '#206974' },
{ value: 90, color: '#15464D' },
{ value: 100, color: '#000000' },
]
}} cellSettings={{
showLabel: true
}} legendRender={legendRender.bind(this)} dataSource={heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
load EmitType<ILoadedEventArgs>
Triggers before heatmap gets loaded.
import { createRoot } from 'react-dom';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
function load(args) {
alert('heatmap loaded successfully');
let selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
};
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
return (<HeatMapComponent id='heatmap' titleSettings={{
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} xAxis={{
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
}} yAxis={{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
}} paletteSettings={{
palette: [
{ value: 0, color: '#C2E7EC' },
{ value: 10, color: '#AEDFE6' },
{ value: 20, color: '#9AD7E0' },
{ value: 30, color: '#72C7D4' },
{ value: 40, color: '#5EBFCE' },
{ value: 50, color: '#4AB7C8' },
{ value: 60, color: '#309DAE' },
{ value: 70, color: '#2B8C9B' },
{ value: 80, color: '#206974' },
{ value: 90, color: '#15464D' },
{ value: 100, color: '#000000' },
]
}} cellSettings={{
showLabel: false
}} load={load.bind(this)} dataSource={heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
loaded EmitType<ILoadedEventArgs>
Triggers after heatmap is loaded.
resized EmitType<IResizeEventArgs>
Triggers to notify the resize of the heatmap when the window is resized.
tooltipRender EmitType<ITooltipEventArgs>
Triggers before the tooltip of the heatmap is rendered on the heatmap cell.
import { createRoot } from 'react-dom';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-heatmap';
/**
* Heatmap Default sample
*/
function Default() {
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]
];
function tooltipRender(args) {
args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
};
return (<HeatMapComponent id='heatmap' titleSettings={{
text: 'Sales Revenue per Employee (in 1000 US$)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
}} xAxis={{
labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
}} yAxis={{
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
}} paletteSettings={{
palette: [
{ value: 0, color: '#C2E7EC' },
{ value: 10, color: '#AEDFE6' },
{ value: 20, color: '#9AD7E0' },
{ value: 30, color: '#72C7D4' },
{ value: 40, color: '#5EBFCE' },
{ value: 50, color: '#4AB7C8' },
{ value: 60, color: '#309DAE' },
{ value: 70, color: '#2B8C9B' },
{ value: 80, color: '#206974' },
{ value: 90, color: '#15464D' },
{ value: 100, color: '#000000' },
]
}} cellSettings={{
showLabel: true
}} tooltipRender={tooltipRender.bind(this)} dataSource={heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);