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

HeatMap

Represents the heatmap control. 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.

<div id="container"/>
<script>
  var heatmapObj = new HeatMap();
  heatmapObj.appendTo("#container");
</script>

Properties

allowSelection

boolean

Enable or disable the selection of cells in heatmap.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
    import { enableRipple } from '@syncfusion/ej2-base';
    enableRipple(true);

    import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
    HeatMap.Inject(Tooltip, Legend);

    /**
    * Sample for Line serie
    */
    let heatmapData: any[] = [
        [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]
    ];

    let heatmap: HeatMap = new 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,
    });
    heatmap.appendTo('#container');

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.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
    import { enableRipple } from '@syncfusion/ej2-base';
    enableRipple(true);

    import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
    HeatMap.Inject(Tooltip, Legend);

    /**
    * Sample for Line serie
    */
    let heatmapData: any[] = [
        [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]
    ];

    let heatmap: HeatMap = new 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'],
        },
        cellSettings: {
            showLabel: false,
            border: {
            width: 0,
            },
            format: '{value} rates'
        },
        allowSelection: true,
        dataSource: heatmapData,
    });
    heatmap.appendTo('#container');

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.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
  import { enableRipple } from '@syncfusion/ej2-base';
  enableRipple(true);

  import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
  HeatMap.Inject(Tooltip, Legend);

  /**
   * Sample for Line serie
   */
  let heatmapData: any[] = [
    [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]
  ];

  let heatmap: HeatMap = new 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'
              }
          },
  });
  heatmap.appendTo('#container');

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.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
  import { enableRipple } from '@syncfusion/ej2-base';
  enableRipple(true);

  import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
  HeatMap.Inject(Tooltip, Legend);

  /**
   * Sample for Line serie
   */
  let heatmapData: any[] = [
    [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]
  ];

  let heatmap: HeatMap = new 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'],
        },
        cellSettings: {
            showLabel: false,
        },
        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' },
        ],
        },
        dataSource: heatmapData,
        legendSettings: {
            position: 'Top',
        }
    });
  heatmap.appendTo('#container');

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.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
  import { enableRipple } from '@syncfusion/ej2-base';
  enableRipple(true);

  import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
  HeatMap.Inject(Tooltip, Legend);

  /**
   * Sample for Line serie
   */
  let heatmapData: any[] = [
    [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]
  ];

  let heatmap: HeatMap = new HeatMap({
    titleSettings: {
        text: 'Sales Revenue per Employee (in 1000 US$)',
        textStyle: {
            size: '15px',
            fontWeight: '500',
            fontStyle: 'Italic',
            fontFamily: 'Courier New'
            }
        },
        xAxis: {
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
            'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
        },
        yAxis: {
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        },
        cellSettings: {
            showLabel: false,
        },      
        dataSource: heatmapData,
  });
  heatmap.appendTo('#container');

tooltipSettings

TooltipSettingsModel

Sets and gets the options for customizing the tooltip of the heatmap.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
  import { enableRipple } from '@syncfusion/ej2-base';
  enableRipple(true);

  import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
  HeatMap.Inject(Tooltip, Legend);

  /**
   * Sample for Line serie
   */
  let heatmapData: any[] = [
    [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]
  ];

  let heatmap: HeatMap = new HeatMap({
    titleSettings: {
        text: 'Sales Revenue per Employee (in 1000 US$)',
        textStyle: {
            size: '15px',
            fontWeight: '500',
            fontStyle: 'Italic',
            fontFamily: 'Courier New'
            }
        },
        xAxis: {
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
            'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
        },
        yAxis: {
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        },
        cellSettings: {
            showLabel: false,
        },
        tooltipSettings: {
            fill: '#696295',
            textStyle: {
                color: '#FFFFFF',
                size: '12px'
            },
             border: {
                width: 2,
                color: '#F0C27B'
            }
        },      
        dataSource: heatmapData,
  });
  heatmap.appendTo('#container');

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

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

clearSelection

This method is used to clear the cell selection in the heatmap.

  <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
            <div>
                <button id="clearSelection">Clear Selection</button>
            </div>
        </body>
  </html>
    import { enableRipple } from '@syncfusion/ej2-base';
    enableRipple(true);

    import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
    HeatMap.Inject(Tooltip, Legend);
    import { Button } from '@syncfusion/ej2-buttons';

    /**
    * Sample for Line serie
    */
    let heatmapData: any[] = [
        [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]
    ];

    let heatmap: HeatMap = new 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,
    });
    let button: Button = new Button();
    button.appendTo('#clearSelection');
    document.getElementById('clearSelection').onclick = () => {
        heatmap.clearSelection();
    };
    heatmap.appendTo('#container');

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

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.

  <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
            <div>
                <button id="destroy">Destroy</button>
            </div>
        </body>
  </html>
    import { enableRipple } from '@syncfusion/ej2-base';
    enableRipple(true);

    import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
    HeatMap.Inject(Tooltip, Legend);
    import { Button } from '@syncfusion/ej2-buttons';

    /**
    * Sample for Line serie
    */
    let heatmapData: any[] = [
        [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]
    ];

    let heatmap: HeatMap = new 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,
    });
    let button: Button = new Button();
    button.appendTo('#destroy');
    document.getElementById('destroy').onclick = () => {
        heatmap.destroy();
    };
    heatmap.appendTo('#container');

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

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

print

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

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

cellClick

EmitType<ICellClickEventArgs>

Triggers when clicking on the heatmap cell.

cellRender

EmitType<ICellEventArgs>

Triggers before each heatmap cell renders.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
  import { enableRipple } from '@syncfusion/ej2-base';
  enableRipple(true);

  import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme, ICellEventArgs } from '@syncfusion/ej2-heatmap';
  HeatMap.Inject(Tooltip, Legend);

  /**
   * Sample for Line serie
   */
  let heatmapData: any[] = [
    [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]
  ];

  let heatmap: HeatMap = new HeatMap({
    titleSettings: {
      text: 'Sales Revenue per Employee (in 1000 US$)',
      textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Italic',
        fontFamily: 'Courier New'
      }
    },
    xAxis: {
      labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
    },
    yAxis: {
      labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
    },
    cellSettings: {
      showLabel: true,
    },
    tooltipSettings: {
      fill: '#696295',
      textStyle: {
        color: '#FFFFFF',
        size: '12px'
      },
      border: {
        width: 2,
        color: '#F0C27B'
      }
    },
    cellRender: (args: ICellEventArgs) => {
      args.displayText = '$ ' + (args.value / 2) + 'K';
    },
    dataSource: heatmapData,
  });
  heatmap.appendTo('#container');

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.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
    import { enableRipple } from '@syncfusion/ej2-base';
    enableRipple(true);

    import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme, ILegendRenderEventArgs } from '@syncfusion/ej2-heatmap';
    HeatMap.Inject(Tooltip, Legend);

    /**
    * Sample for Line serie
    */
    let heatmapData: any[] = [
        [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]
    ];

    let heatmap: HeatMap = new 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,
        legendRender: (args: ILegendRenderEventArgs) => {
            args.text = args.text +'k';
        },
        dataSource: heatmapData,
    });
    heatmap.appendTo('#container');

load

EmitType<ILoadedEventArgs>

Triggers before heatmap gets loaded.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
    import { enableRipple } from '@syncfusion/ej2-base';
    enableRipple(true);

    import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme } from '@syncfusion/ej2-heatmap';
    HeatMap.Inject(Tooltip, Legend);

  /**
  * Sample for Line serie
  */
    let heatmapData: any[] = [
        [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]
    ];

    let heatmap: HeatMap = new 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,
        load: (args: ILoadedEventArgs) => {
            alert('Heatmap rendered successfully');
            let selectedTheme: string = location.hash.split('/')[1];
            selectedTheme = selectedTheme ? selectedTheme : 'Material';
            args.heatmap.theme = <HeatMapTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
        },
        dataSource: heatmapData,
    });
  heatmap.appendTo('#container');

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.

    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </head>

        <body>
            <div id="container"> </div>
        </body>
    </html>
    import { enableRipple } from '@syncfusion/ej2-base';
    enableRipple(true);

    import { HeatMap, Legend, Tooltip, ILoadedEventArgs, HeatMapTheme, ITooltipEventArgs } from '@syncfusion/ej2-heatmap';
    HeatMap.Inject(Tooltip, Legend);

    /**
    * Sample for Line serie
    */
    let heatmapData: any[] = [
        [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]
    ];

    let heatmap: HeatMap = new 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,
        tooltipRender: (args: ITooltipEventArgs) => {
            args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
        },
        dataSource: heatmapData,
    });
    heatmap.appendTo('#container');
Previous
Next