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

HeatMapModel API in React HeatMap API component

Interface for a class HeatMap

Properties

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

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

backgroundColor

string

Specifies the background color of the entire heatmap.

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.

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

enableMultiSelect

boolean

Enable or disable the multiple selection of cells in heatmap.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

height

string

Sets and gets the height of the heatmap. The height of the heatmap accepts pixel or percentage values given in string format.

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’.

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.

showTooltip

boolean

Enable or disable the visibility of the tooltip for heatmap.

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.

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.

xAxis

AxisModel

Sets and gets the options to configure the horizontal axis.

yAxis

AxisModel

Sets and gets the options to configure the vertical axis.

Previous
Next