JavaScript (ES5)

Search results

HeatMapModel API in JavaScript (ES5) HeatMap API control

Interface for a class HeatMap

Properties

cellClick
`EmitType<ICellClickEventArgs>`

Triggers when click the heat map 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 multiple cells gets selected.

created
`EmitType<Object>`

Triggers after heat map 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 heat map load.

    <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 after resizing of Heatmap.

tooltipRender
`EmitType<ITooltipEventArgs>`

Triggers when click the heat map 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');

allowSelection
`boolean`

Enable or disable the selection of multiple 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');

cellSettings
`CellSettingsModel`

Options to customize the heat map 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 } 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`

Specifies the datasource for the heat map.

dataSourceSettings
`DataModel`

Specifies the datasource settings for heat map.

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

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`

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

legendSettings
`LegendSettingsModel`

Options for customizing the legend of the heat map

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

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
`string`

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.

showTooltip
`boolean`

Enable or disable the tool tip for heatmap

theme
`string`

Specifies the theme for heatmap.

titleSettings
`TitleModel`

Title of heat map

    <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`

Options for customizing the ToolTipSettings property of the heat map

    <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`

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.

xAxis
`AxisModel`

Options to configure the horizontal axis.

yAxis
`AxisModel`

Options to configure the vertical axis.

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

HeatMapModel API in JavaScript (ES5) HeatMap API control

Properties

cellClick EmitType<ICellClickEventArgs>

cellRender EmitType<ICellEventArgs>

cellSelected EmitType<ISelectedEventArgs>

created EmitType<Object>

legendRender EmitType<ILegendRenderEventArgs>

load EmitType<ILoadedEventArgs>

loaded EmitType<ILoadedEventArgs>

resized EmitType<IResizeEventArgs>

tooltipRender EmitType<ITooltipEventArgs>

allowSelection boolean

cellSettings CellSettingsModel

dataSource Object

dataSourceSettings DataModel

enablePersistence boolean

enableRtl boolean

height string

legendSettings LegendSettingsModel

locale string

margin MarginModel

paletteSettings PaletteSettingsModel

renderingMode string

showTooltip boolean

theme string

titleSettings TitleModel

tooltipSettings TooltipSettingsModel

width string

xAxis AxisModel

yAxis AxisModel