Appearance in Vue HeatMap chart component

13 Jun 202424 minutes to read

Cell customization

You can customize the cell by using the cellSettings property.

Border

Change the width, color, and radius of the heat map cells by using the border property.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
import { provide } from "vue";

const dataSource = [
    [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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};
const cellSettings = {
    border: {
        width: 1,
        radius: 4,
        color: 'white'
    }
};
provide('heatmap', [Tooltip, Legend])

</script>
<template>
    <div id="app">
      <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings' :xAxis='xAxis' :yAxis='yAxis'
        :dataSource='dataSource'></ejs-heatmap>
    </div>
  </template>
  <script>
  
  import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
  
  
  export default {
    name: "App",
    components: {
      "ejs-heatmap": HeatMapComponent
    },
  
    data: function () {
      return {
        dataSource: [
          [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]
        ],
        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: {
          border: {
            width: 1,
            radius: 4,
            color: 'white'
          }
        }
      }
    },
    provide: {
      heatmap: [Tooltip, Legend]
    }
  }
  </script>

Cell highlighting

Enable or disable the cell highlighting while hovering over the heat map cells by using the enableCellHighlighting property.

Note: The cell highlighting only works in a SVG rendering mode.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
import { provide } from "vue";

const dataSource = [
    [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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const cellSettings = {
    enableCellHighlighting: true
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
}

provide('heatmap', [Tooltip, Legend])

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
    </div>
  </template>
  <script>
  
  import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
  
  
  export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [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]
            ],
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            cellSettings: {
                enableCellHighlighting: true
            },
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    }
  }
  </script>

Color gradient mode

The colorGradientMode property can be used to set the minimum and maximum values for colors based on row and column.

Three types of color gradient modes are available.

  • Table: The minimum and maximum value colors calculated for overall data.
  • Row: The minimum and maximum value colors calculated for each row of data.
  • Column: The minimum and maximum value colors calculated for each column of data.

Note: The default value of colorGradientMode is Table.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings'
            :paletteSettings='paletteSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
import { provide } from "vue";

const dataSource = [
    [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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const cellSettings = {
    enableCellHighlighting: true
};
const paletteSettings = {
    colorGradientMode: 'Column'
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};

provide('heatmap', [Tooltip, Legend])

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :cellSettings='cellSettings'
            :paletteSettings='paletteSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';

export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },

    data: function () {
        return {
            dataSource: [
                [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]
            ],
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            cellSettings: {
                enableCellHighlighting: true
            },
            paletteSettings: {
                colorGradientMode: 'Column'
            },
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    }
}
</script>

Background color

The background color of the HeatMap can be customized using the backgroundColor property.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :backgroundColor="backgroundColor" :titleSettings="titleSettings" :xAxis="xAxis"
      :yAxis="yAxis" :dataSource="dataSource"></ejs-heatmap>
  </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap } from "@syncfusion/ej2-vue-heatmap";


const dataSource = [
  [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]
];
const backgroundColor = "#c7afcf";
const titleSettings = {
  text: "Sales Revenue per Employee (in 1000 US$)",
  textStyle: {
    size: "15px",
    fontWeight: "500",
    fontStyle: "Normal",
    fontFamily: "Segoe UI"
  }
};
const xAxis = {
  labels: [
    "Nancy",
    "Andrew",
    "Janet",
    "Margaret",
    "Steven",
    "Michael",
    "Robert",
    "Laura",
    "Anne",
    "Paul",
    "Karin",
    "Mario"
  ]
};
const yAxis = {
  labels: ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"]
};

</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :backgroundColor="backgroundColor" :titleSettings="titleSettings" :xAxis="xAxis"
      :yAxis="yAxis" :dataSource="dataSource"></ejs-heatmap>
  </div>
</template>
<script>

import { HeatMapComponent } from "@syncfusion/ej2-vue-heatmap";


export default {
  name: "App",
  components: {
    "ejs-heatmap": HeatMapComponent
  },
  data: function () {
    return {
      dataSource: [
        [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]
      ],
      backgroundColor: "#c7afcf",
      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"]
      }
    };
  }
};
</script>

Margin

Set the margin for the HeatMap from its container by using the margin property.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :margin='margin' :xAxis='xAxis' :yAxis='yAxis'
            :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
import { provide } from "vue";

const dataSource = [
    [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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};
const margin = { left: 15, right: 15, top: 15, bottom: 15 };

provide('heatmap', [Tooltip, Legend])

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :margin='margin' :xAxis='xAxis' :yAxis='yAxis'
            :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },

    data: function () {
        return {
            dataSource: [
                [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]
            ],
            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']
            },
            margin: { left: 15, right: 15, top: 15, bottom: 15 }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    }
}
</script>

Title

The title is used to provide a quick information about the data plotted in heatmap. The text property is used to set the title for the heatmap. The text style of the title can be customized by using the textStyle property.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis'
            :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
import { provide } from "vue";

const dataSource = [
    [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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Italic',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};

provide('heatmap', [Tooltip, Legend])

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis'
            :dataSource='dataSource'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },

    data: function () {
        return {
            dataSource: [
                [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]
            ],
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Italic',
                    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']
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    }
}
</script>

Data label

The visibility of data labels can be toggled using the showLabel property. By default, the data labels will be visible.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
import { provide } from "vue";

const dataSource = [
    [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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};
const cellSettings = {
    showLabel: false
};

provide('heatmap', [Tooltip, Legend])

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },

    data: function () {
        return {
            dataSource: [
                [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]
            ],
            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
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    }
}
</script>

Customize the data label

The label displayed in the HeatMap cell can be changed using the cellRender event.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings="titleSettings" :xAxis="xAxis" :yAxis="yAxis" :dataSource="dataSource"
      :cellRender="cellRender"></ejs-heatmap>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from "@syncfusion/ej2-vue-heatmap";

const dataSource = [
  [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]
];
const titleSettings = {
  text: "Sales Revenue per Employee (in 1000 US$)",
  textStyle: {
    size: "15px",
    fontWeight: "500",
    fontStyle: "Normal",
    fontFamily: "Segoe UI"
  }
};
const xAxis = {
  labels: [
    "Nancy",
    "Andrew",
    "Janet",
    "Margaret",
    "Steven",
    "Michael",
    "Robert",
    "Laura",
    "Anne",
    "Paul",
    "Karin",
    "Mario"
  ]
};
const yAxis = {
  labels: ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"]
};

provide('heatmap', [Tooltip, Legend]);

const cellRender = (args) => {
  args.displayText = args.value + "$";
};


</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings="titleSettings" :xAxis="xAxis" :yAxis="yAxis" :dataSource="dataSource"
      :cellRender="cellRender"></ejs-heatmap>
  </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from "@syncfusion/ej2-vue-heatmap";


export default {
  name: "App",
  components: {
    "ejs-heatmap": HeatMapComponent
  },
  data: function () {
    return {
      dataSource: [
        [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]
      ],
      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"]
      }
    };
  },
  provide: {
    heatmap: [Tooltip, Legend]
  },
  methods: {
    cellRender: function (args) {
      args.displayText = args.value + "$";
    }
  }
};
</script>

Text style

The text attributes of the data label such as font-family, font-size, and color can be customized using the textStyle in the cellSettings property.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
import { provide } from "vue";


const dataSource = [
    [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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};
const cellSettings = {
    textStyle: {
        fontStyle: 'Italic',
        fontFamily: 'Segoe UI'
    }
};

provide('heatmap', [Tooltip, Legend]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [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]
            ],
            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: {
                textStyle: {
                    fontStyle: 'Italic',
                    fontFamily: 'Segoe UI'
                }
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    }
}
</script>

Format

The format of the data label, such as currency, decimal, percent etc. can be changed using format property.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script setup>

import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
import { provide } from "vue";


const dataSource = [
    [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]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario']
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
};
const cellSettings = {
    format: '${value}'
};

provide('heatmap', [Tooltip, Legend]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';

export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [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]
            ],
            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: {
                format: '${value}'
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    }
}
</script>

Template

Any HTML elements can be added as a template in the data labels by using the labelTemplate property of cellSettings in the HeatMap.

The following examples show various data binding methods in the HeatMap using the labelTemplate property.

Array binding

By including ${value} in the template content, the value from the data source for the corresponding cell can be displayed in the HeatMap cell as data label template content. Additionally, the x-axis and y-axis label values can be displayed by including ${xLabel} and ${yLabel} in the template content.

Table

The following example demonstrates how to add a data label template for array table binding.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { HeatMapComponent as EjsHeatmap, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


const dataSource = [
    [[4, 39], [3, 8], [1, 3], [1, 10], [4, 4], [2, 15]],
    [[4, 28], [5, 92], [5, 73], [3, 1], [3, 4], [4, 126]],
    [[4, 45], [5, 152], [0, 44], [4, 54], [5, 243], [2, 45]]
];
const titleSettings = {
    text: 'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'inherit'
    }
};
const xAxis = {
    labels: ['2015', '2016', '2017']
};
const yAxis = {
    labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
};
const cellSettings = {
    labelTemplate:
        '<div style="width:25px;height:20px;text-align:center;padding-top:2px;background-color:#5BBB9C; border: 1px solid #000000; border-radius:50%;font-weight:bold;">${value}</div>'
};

provide('heatmap', [Tooltip, Legend]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [[4, 39], [3, 8], [1, 3], [1, 10], [4, 4], [2, 15]],
                [[4, 28], [5, 92], [5, 73], [3, 1], [3, 4], [4, 126]],
                [[4, 45], [5, 152], [0, 44], [4, 54], [5, 243], [2, 45]]
            ],
            titleSettings: {
                text: 'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'inherit'
                }
            },
            xAxis: {
                labels: ['2015', '2016', '2017']
            },
            yAxis: {
                labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
            },
            cellSettings: {
                labelTemplate:
                    '<div style="width:25px;height:20px;text-align:center;padding-top:2px;background-color:#5BBB9C; border: 1px solid #000000; border-radius:50%;font-weight:bold;">${value}</div>'
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend]
    }
}
</script>

Cell

The following example demonstrates how to add a data label template for array cell binding.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :dataSourceSettings='dataSourceSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { HeatMapComponent as EjsHeatmap, Adaptor, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';

const dataSource = [
    [0, 0, [4, 39]], [0, 1, [3, 8]], [0, 2, [1, 3]], [0, 3, [1, 10]], [0, 4, [4, 4]], [0, 5, [2, 15]],
    [1, 0, [4, 28]], [1, 1, [5, 92]], [1, 2, [5, 73]], [1, 3, [3, 1]], [1, 4, [3, 4]], [1, 5, [4, 126]],
    [2, 0, [4, 45]], [2, 1, [5, 152]], [2, 2, [0, 44]], [2, 3, [4, 54]], [2, 4, [5, 243]], [2, 5, [2, 45]]
];
const titleSettings = {
    text: 'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'inherit',
    },
};
const xAxis = {
    labels: ['2015', '2016', '2017']
};
const yAxis = {
    labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
};
const cellSettings = {
    labelTemplate:
        '<div style="width:25px;height:20px;text-align:center;padding-top:2px;background-color:#5BBB9C; border: 1px solid #000000; border-radius:50%;font-weight:bold;">${value}</div>'
};
const dataSourceSettings = {
    isJsonData: false,
    adaptorType: 'Cell'
};

provide('heatmap', [Tooltip, Legend, Adaptor]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :dataSourceSettings='dataSourceSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Adaptor, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [0, 0, [4, 39]], [0, 1, [3, 8]], [0, 2, [1, 3]], [0, 3, [1, 10]], [0, 4, [4, 4]], [0, 5, [2, 15]],
                [1, 0, [4, 28]], [1, 1, [5, 92]], [1, 2, [5, 73]], [1, 3, [3, 1]], [1, 4, [3, 4]], [1, 5, [4, 126]],
                [2, 0, [4, 45]], [2, 1, [5, 152]], [2, 2, [0, 44]], [2, 3, [4, 54]], [2, 4, [5, 243]], [2, 5, [2, 45]]
            ],
            titleSettings: {
                text: 'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'inherit',
                },
            },
            xAxis: {
                labels: ['2015', '2016', '2017']
            },
            yAxis: {
                labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
            },
            cellSettings: {
                labelTemplate:
                    '<div style="width:25px;height:20px;text-align:center;padding-top:2px;background-color:#5BBB9C; border: 1px solid #000000; border-radius:50%;font-weight:bold;">${value}</div>'
            },
            dataSourceSettings: {
                isJsonData: false,
                adaptorType: 'Cell'
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend, Adaptor]
    }
}
</script>

JSON binding

By including the desired field name in the template content, such as ${value}, the value from the data source for the corresponding cell can be displayed in the HeatMap cell as data label template content.

Table

The following example demonstrates how to add a data label template for JSON table binding.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :dataSourceSettings='dataSourceSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { HeatMapComponent as EjsHeatmap, Adaptor, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';



const dataSource = [
    {
        Year: '2017',
        image:
            'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/golf-ball.png',
        'Jan-Feb': [4, 39],
        'Mar-Apr': [3, 8],
        'May-Jun': [1, 3],
        'Jul-Aug': [1, 10],
        'Sep-Oct': [4, 4],
        'Nov-Dec': [2, 15]
    },
    {
        Year: '2016',
        image:
            'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/basket-ball.png',
        'Jan-Feb': [4, 28],
        'Mar-Apr': [5, 92],
        'May-Jun': [5, 73],
        'Jul-Aug': [3, 1],
        'Sep-Oct': [3, 4],
        'Nov-Dec': [4, 126]
    },
    {
        Year: '2015',
        image:
            'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/foot-ball.png',
        'Jan-Feb': [4, 45],
        'Mar-Apr': [5, 152],
        'May-Jun': [0, 44],
        'Jul-Aug': [4, 54],
        'Sep-Oct': [5, 243],
        'Nov-Dec': [2, 45]
    }
];
const titleSettings = {
    text: 'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'inherit',
    },
};
const xAxis = {
    labels: ['2015', '2016', '2017']
};
const yAxis = {
    labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
};
const cellSettings = {
    labelTemplate:
        "<div><img style='width:20px;height:20px;' src='${image}'/> </div>"
};
const dataSourceSettings = {
    isJsonData: true,
    adaptorType: 'Table',
    xDataMapping: 'Year'
};

provide('heatmap', [Tooltip, Legend, Adaptor]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :dataSourceSettings='dataSourceSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Adaptor, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                {
                    Year: '2017',
                    image:
                        'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/golf-ball.png',
                    'Jan-Feb': [4, 39],
                    'Mar-Apr': [3, 8],
                    'May-Jun': [1, 3],
                    'Jul-Aug': [1, 10],
                    'Sep-Oct': [4, 4],
                    'Nov-Dec': [2, 15]
                },
                {
                    Year: '2016',
                    image:
                        'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/basket-ball.png',
                    'Jan-Feb': [4, 28],
                    'Mar-Apr': [5, 92],
                    'May-Jun': [5, 73],
                    'Jul-Aug': [3, 1],
                    'Sep-Oct': [3, 4],
                    'Nov-Dec': [4, 126]
                },
                {
                    Year: '2015',
                    image:
                        'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/foot-ball.png',
                    'Jan-Feb': [4, 45],
                    'Mar-Apr': [5, 152],
                    'May-Jun': [0, 44],
                    'Jul-Aug': [4, 54],
                    'Sep-Oct': [5, 243],
                    'Nov-Dec': [2, 45]
                }
            ],
            titleSettings: {
                text: 'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'inherit',
                },
            },
            xAxis: {
                labels: ['2015', '2016', '2017']
            },
            yAxis: {
                labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
            },
            cellSettings: {
                labelTemplate:
                    "<div><img style='width:20px;height:20px;' src='${image}'/> </div>"
            },
            dataSourceSettings: {
                isJsonData: true,
                adaptorType: 'Table',
                xDataMapping: 'Year'
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend, Adaptor]
    }
}
</script>

Cell

The following example demonstrates how to add a data label template for JSON cell binding.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :dataSourceSettings='dataSourceSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { HeatMapComponent as EjsHeatmap, Adaptor, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';



const dataSource = [
    { Year: '2017', Months: 'Jan-Feb', Accidents: 4, Fatalities: 39 },
    { Year: '2017', Months: 'Mar-Apr', Accidents: 3, Fatalities: 8 },
    { Year: '2017', Months: 'May-Jun', Accidents: 1, Fatalities: 3 },
    { Year: '2017', Months: 'Jul-Aug', Accidents: 1, Fatalities: 10 },
    { Year: '2017', Months: 'Sep-Oct', Accidents: 4, Fatalities: 4 },
    { Year: '2017', Months: 'Nov-Dec', Accidents: 2, Fatalities: 15 },
    { Year: '2016', Months: 'Jan-Feb', Accidents: 4, Fatalities: 28 },
    { Year: '2016', Months: 'Mar-Apr', Accidents: 5, Fatalities: 92 },
    { Year: '2016', Months: 'May-Jun', Accidents: 5, Fatalities: 73 },
    { Year: '2016', Months: 'Jul-Aug', Accidents: 3, Fatalities: 1 },
    { Year: '2016', Months: 'Sep-Oct', Accidents: 3, Fatalities: 4 },
    { Year: '2016', Months: 'Nov-Dec', Accidents: 4, Fatalities: 126 },
    { Year: '2015', Months: 'Jan-Feb', Accidents: 4, Fatalities: 45 },
    { Year: '2015', Months: 'Mar-Apr', Accidents: 5, Fatalities: 152 },
    { Year: '2015', Months: 'May-Jun', Accidents: 0, Fatalities: 0 },
    { Year: '2015', Months: 'Jul-Aug', Accidents: 4, Fatalities: 54 },
    { Year: '2015', Months: 'Sep-Oct', Accidents: 5, Fatalities: 243 },
    { Year: '2015', Months: 'Nov-Dec', Accidents: 2, Fatalities: 45 },
];
const titleSettings = {
    text: 'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'inherit',
    },
};
const xAxis = {
    labels: ['2015', '2016', '2017']
};
const yAxis = {
    labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
};
const cellSettings = {
    labelTemplate:
        "<div> Accidents - ${Accidents}</div>"
};
const dataSourceSettings = {
    isJsonData: true,
    adaptorType: 'Cell',
    xDataMapping: 'Year',
    yDataMapping: 'Months',
    valueMapping: 'Fatalities',
};

provide('heatmap', [Tooltip, Legend, Adaptor]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :dataSourceSettings='dataSourceSettings' :xAxis='xAxis'
            :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Adaptor, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },

    data: function () {
        return {
            dataSource: [
                { Year: '2017', Months: 'Jan-Feb', Accidents: 4, Fatalities: 39 },
                { Year: '2017', Months: 'Mar-Apr', Accidents: 3, Fatalities: 8 },
                { Year: '2017', Months: 'May-Jun', Accidents: 1, Fatalities: 3 },
                { Year: '2017', Months: 'Jul-Aug', Accidents: 1, Fatalities: 10 },
                { Year: '2017', Months: 'Sep-Oct', Accidents: 4, Fatalities: 4 },
                { Year: '2017', Months: 'Nov-Dec', Accidents: 2, Fatalities: 15 },
                { Year: '2016', Months: 'Jan-Feb', Accidents: 4, Fatalities: 28 },
                { Year: '2016', Months: 'Mar-Apr', Accidents: 5, Fatalities: 92 },
                { Year: '2016', Months: 'May-Jun', Accidents: 5, Fatalities: 73 },
                { Year: '2016', Months: 'Jul-Aug', Accidents: 3, Fatalities: 1 },
                { Year: '2016', Months: 'Sep-Oct', Accidents: 3, Fatalities: 4 },
                { Year: '2016', Months: 'Nov-Dec', Accidents: 4, Fatalities: 126 },
                { Year: '2015', Months: 'Jan-Feb', Accidents: 4, Fatalities: 45 },
                { Year: '2015', Months: 'Mar-Apr', Accidents: 5, Fatalities: 152 },
                { Year: '2015', Months: 'May-Jun', Accidents: 0, Fatalities: 0 },
                { Year: '2015', Months: 'Jul-Aug', Accidents: 4, Fatalities: 54 },
                { Year: '2015', Months: 'Sep-Oct', Accidents: 5, Fatalities: 243 },
                { Year: '2015', Months: 'Nov-Dec', Accidents: 2, Fatalities: 45 },
            ],
            titleSettings: {
                text: 'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'inherit',
                },
            },
            xAxis: {
                labels: ['2015', '2016', '2017']
            },
            yAxis: {
                labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
            },
            cellSettings: {
                labelTemplate:
                    "<div> Accidents - ${Accidents}</div>"
            },
            dataSourceSettings: {
                isJsonData: true,
                adaptorType: 'Cell',
                xDataMapping: 'Year',
                yDataMapping: 'Months',
                valueMapping: 'Fatalities',
            }
        }
    },
    provide: {
        heatmap: [Tooltip, Legend, Adaptor]
    }
}
</script>

See Also