React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

HeatMapComponent

Represents react HeatMap Component

<HeatMapComponent></HeatMapComponent>

Properties

allowSelection

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

backgroundColor

string

Specifies the background color of the entire heatmap.

Defaults to null

cellSettings

CellSettingsModel

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'));

dataSource

Object

Specifies the datasource for the heat map.

Defaults to null

dataSourceSettings

DataModel

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'));

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

The height of the heatmap accepts pixel values given in string format.

Defaults to null

legendSettings

LegendSettingsModel

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 ”

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

margin

MarginModel

Options to customize left, right, top and bottom margins of the heat map.

paletteSettings

PaletteSettingsModel

Options for customizing the cell color of the heat map

renderingMode

DrawType

Specifies the rendering mode of heat map.

  • SVG - Heat map is render using SVG draw mode.
  • Canvas - Heat map is render using Canvas draw mode.
  • Auto - Automatically switch the draw mode based on number of records in data source.

Defaults to SVG

showTooltip

boolean

Enable or disable the tool tip for heatmap

Defaults to true

theme

HeatMapTheme

Specifies the theme for heatmap.

Defaults to ‘Material’

titleSettings

TitleModel

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 ”

tooltipSettings

TooltipSettingsModel

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'));

width

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

xAxis

AxisModel

Options to configure the horizontal axis.

yAxis

AxisModel

Options to configure the vertical axis.

Methods

clearSelection

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

destroy

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

export

Handles the export method for heatmap control.

Returns void

getModuleName

Get component name

Returns string

print

Method to print the heatmap.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

Events

cellClick

EmitType<ICellClickEventArgs>

Triggers when click the heat map cell.

cellRender

EmitType<ICellEventArgs>

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'));

cellSelected

EmitType<ISelectedEventArgs>

Triggers when multiple cells gets selected.

created

EmitType<Object>

Triggers after heat map rendered.

legendRender

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'));

load

EmitType<ILoadedEventArgs>

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'));

loaded

EmitType<ILoadedEventArgs>

Triggers after heatmap is loaded.

resized

EmitType<IResizeEventArgs>

Triggers after resizing of Heatmap.

tooltipRender

EmitType<ITooltipEventArgs>

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'));
Previous
Next