Represents react HeatMap Component
<HeatMapComponent></HeatMapComponent>
boolean
Enable or disable the selection of multiple cells in heatmap
import { render } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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={this.heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
}
render(<Default />, document.getElementById('sample'));
Defaults to false
string
Specifies the background color of the entire heatmap.
Defaults to null
Options to customize the heat map cell
import { render } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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={this.heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip, Adaptor]}/>
</HeatMapComponent>);
}
}
render(<Default />, document.getElementById('sample'));
Object
Specifies the datasource for the heat map.
Defaults to null
Specifies the datasource settings for heat map.
import { render } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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 }
];
}
render() {
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={this.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>);
}
}
render(<Default />, document.getElementById('sample'));
boolean
Enable or disable the multiple selection of cells in heatmap.
Defaults to true
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
string
The height of the heatmap accepts pixel values given in string format.
Defaults to null
Options for customizing the legend of the heat map
import { render } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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={this.heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip, Adaptor]}/>
</HeatMapComponent>);
}
}
render(<Default />, document.getElementById('sample'));
Defaults to ”
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Options to customize left, right, top and bottom margins of the heat map.
Options for customizing the cell color of the heat map
Specifies the rendering mode of heat map.
Defaults to SVG
boolean
Enable or disable the tool tip for heatmap
Defaults to true
Specifies the theme for heatmap.
Defaults to ‘Material’
Title of heat map
import { render } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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={this.heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
}
render(<Default />, document.getElementById('sample'));
Defaults to ”
Options for customizing the ToolTipSettings property of the heat map
import { render } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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} tooltipRender={this.tooltipTemplate} dataSource={this.heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent>);
}
}
render(<Default />, document.getElementById('sample'));
string
The width of the heatmap as a string accepts input as both like ‘100px’ or ‘100%‘. If specified as ‘100%, heatmap renders to the full width of its parent element.
Defaults to null
Options to configure the horizontal axis.
Options to configure the vertical axis.
To clear the multi cell selection
import { render } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor, ISelectedEventArgs } from '@syncfusion/ej2-react-heatmap';
import { IChangedEventArgs } from '@syncfusion/ej2-react-charts';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
onClick(args) {
this.heatmap.clearSelection();
}
render() {
return (<div><HeatMapComponent id='heatmap' ref={t => (this.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={this.heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent><ButtonComponent id="clearSelection" onClick={this.onClick.bind(this)}>Clear Selection</ButtonComponent ></div>
);
}
}
render(<Default />, document.getElementById('sample'));
Returns void
To destroy the widget
import { render } from 'react-dom';
import './index.css';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor, ISelectedEventArgs } from '@syncfusion/ej2-react-heatmap';
import { IChangedEventArgs } from '@syncfusion/ej2-react-charts';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
onClick(args) {
this.heatmap.destroy();
}
render() {
return (<div><HeatMapComponent id='heatmap' ref={t => (this.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={this.heatmapData}>
<Inject services={[Legend, Tooltip]}/>
</HeatMapComponent><ButtonComponent id="clearSelection" onClick={this.onClick.bind(this)}>Destroy</ButtonComponent ></div>
);
}
}
render(<Default />, document.getElementById('sample'));
Returns void
Handles the export method for heatmap control.
Returns void
Get component name
Returns string
Method to print the heatmap.
Returns void
Applies all the pending property changes and render the component again.
Returns void
Triggers when click the heat map cell.
Triggers before each heatmap cell renders.
import { render } from 'react-dom';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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
}} cellRender={this.cellRender.bind(this)} dataSource={this.heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip, Adaptor]}/>
</HeatMapComponent>);
}
cellRender(args) {
args.displayText = '$ ' + (args.value / 2) + 'K';
};
}
render(<Default />, document.getElementById('sample'));
Triggers when multiple cells gets selected.
EmitType<Object>
Triggers after heat map rendered.
EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered.
import { render } from 'react-dom';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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={this.legendRender.bind(this)} dataSource={this.heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip, Adaptor]}/>
</HeatMapComponent>);
}
legendRender(args) {
args.text = args.text +'k';
};
}
render(<Default />, document.getElementById('sample'));
Triggers before heat map load.
import { render } from 'react-dom';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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={this.load.bind(this)} dataSource={this.heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip, Adaptor]}/>
</HeatMapComponent>);
}
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));
};
}
render(<Default />, document.getElementById('sample'));
Triggers after heatmap is loaded.
Triggers after resizing of Heatmap.
Triggers when click the heat map cell.
import { render } from 'react-dom';
import * as React from "react";
import { HeatMapComponent, Legend, Tooltip, Inject, Adaptor } from '@syncfusion/ej2-react-heatmap';
import { SampleBase } from './sample-base';
/**
* Heatmap Default sample
*/
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.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]
];
}
render() {
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={this.tooltipRender.bind(this)} dataSource={this.heatmapData}
legendSettings={{
position: 'Top',
}}>
<Inject services={[Legend, Tooltip, Adaptor]}/>
</HeatMapComponent>);
}
tooltipRender(args) {
args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
};
}
render(<Default />, document.getElementById('sample'));