Legend in Vue Heatmap chart component
13 Jun 202424 minutes to read
The legend is used to provide the information about the heat map cell. You can enable the legend by setting the visible property to true and injecting the Legend module into the provide.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:paletteSettings='paletteSettings' :cellSettings='cellSettings'
:legendSettings='legendSettings'></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']
};
const cellSettings = {
showLabel: false,
};
const 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' },
]
};
const legendSettings = {
position: 'Right',
};
provide('heatmap', [Tooltip, Legend])
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:paletteSettings='paletteSettings' :cellSettings='cellSettings'
:legendSettings='legendSettings'></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,
},
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' },
]
},
legendSettings: {
position: 'Right',
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>Legend types
Heat map supports two legend types: Gradient and list type.
- Gradient - This is a continuous color legend with smooth color transition between palette color values.
- List - List is a fixed color legend. Each palette color information is shown separately in the list item.
You can change the legend type by using the type property in the paletteSettings property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:paletteSettings='paletteSettings' :cellSettings='cellSettings'
:legendSettings='legendSettings'></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']
};
const cellSettings = {
showLabel: false,
};
const paletteSettings = {
type: 'Fixed'
};
const legendSettings = {
position: 'Right',
};
provide('heatmap', [Tooltip, Legend]);
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:paletteSettings='paletteSettings' :cellSettings='cellSettings'
:legendSettings='legendSettings'></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,
},
paletteSettings: {
type: 'Fixed'
},
legendSettings: {
position: 'Right',
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>Placement
You can place the legend at left, right, top, or bottom to the heat map layout by using the position property. The legend is positioned at the right to the heat map by default.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings'></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']
};
const legendSettings = {
position: 'Top',
};
provide('heatmap', [Tooltip, Legend])
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings'></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']
},
legendSettings: {
position: 'Top',
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>Alignment
You can align the legend as center, far, or near to the heat map using the alignment property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings'></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']
};
const legendSettings = {
position: 'Right',
alignment: 'Near',
height: '150px'
};
provide('heatmap', [Tooltip, Legend])
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings'></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']
},
legendSettings: {
position: 'Right',
alignment: 'Near',
height: '150px'
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>Legend dimensions
You can change the legend dimensions with values in pixels or percentage by using thewidth and height properties.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings'></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']
};
const legendSettings = {
position: 'Right',
height: '150px'
};
provide('heatmap', [Tooltip, Legend])
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings'></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']
},
legendSettings: {
position: 'Right',
height: '150px'
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>Paging for legend
Paging is available only for the list type legend in the heat map, and it can be enabled by default,when the legend items exceed the legend bounds. You can view each legend items by navigating between the pages using navigation buttons.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings' :paletteSettings='paletteSettings'></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']
};
const paletteSettings = {
palette: [
{ value: 0, color: '#C2E7EC' },
{ value: 10, color: '#AEDFE6' },
{ value: 20, color: '#9AD7E0' },
{ value: 25, color: '#86CFDA' },
{ value: 30, color: '#72C7D4' },
{ value: 40, color: '#5EBFCE' },
{ value: 50, color: '#4AB7C8' },
{ value: 55, color: '#36AFC2' },
{ value: 60, color: '#309DAE' },
{ value: 70, color: '#2B8C9B' },
{ value: 75, color: '#257A87' },
{ value: 80, color: '#206974' },
{ value: 85, color: '#1B5761' },
{ value: 90, color: '#15464D' },
{ value: 100, color: '#000000' },
],
type: "Fixed"
};
const legendSettings = {
position: 'Right',
height: '150px'
};
provide('heatmap', [Tooltip, Legend])
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings' :paletteSettings='paletteSettings'></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']
},
paletteSettings: {
palette: [
{ value: 0, color: '#C2E7EC' },
{ value: 10, color: '#AEDFE6' },
{ value: 20, color: '#9AD7E0' },
{ value: 25, color: '#86CFDA' },
{ value: 30, color: '#72C7D4' },
{ value: 40, color: '#5EBFCE' },
{ value: 50, color: '#4AB7C8' },
{ value: 55, color: '#36AFC2' },
{ value: 60, color: '#309DAE' },
{ value: 70, color: '#2B8C9B' },
{ value: 75, color: '#257A87' },
{ value: 80, color: '#206974' },
{ value: 85, color: '#1B5761' },
{ value: 90, color: '#15464D' },
{ value: 100, color: '#000000' },
],
type: "Fixed"
},
legendSettings: {
position: 'Right',
height: '150px'
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>Smart Legend
Smart legend is another way of showing list type legend with responsiveness and readability, when the palette has more number of items. You can enable this smart legend by using the enableSmartLegend property when the palette type is set to Fixed.
In smart legend, you can change the display type of legend labels by using the labelDisplayType property.
The following are the legend label display types:
- All: Displays all labels in the legend.
- Edge: Displays the legend labels only at extreme ends.
- None: None of the labels are displayed. The tooltip will appear for this type of label display when hovering over the legend item.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings' :cellSettings='cellSettings'
:paletteSettings='paletteSettings'></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']
};
const cellSettings = {
showLabel: false,
};
const 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' },
],
type: "Fixed"
};
const legendSettings = {
position: 'Bottom',
enableSmartLegend: true,
width: '75%'
};
provide('heatmap', [Tooltip, Legend])
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings' :cellSettings='cellSettings'
:paletteSettings='paletteSettings'></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,
},
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' },
],
type: "Fixed"
},
legendSettings: {
position: 'Bottom',
enableSmartLegend: true,
width: '75%'
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>Legend Selection
In the HeatMap, the legend selection is used to toggle the visibility of cell for viewing the specific range value. You can enable the legend selection using the toggleVisibility property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings' :cellSettings='cellSettings'
:paletteSettings='paletteSettings'></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']
};
const cellSettings = {
showLabel: false,
};
const 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' },
],
type: "Fixed"
};
const legendSettings = {
position: 'Bottom',
enableSmartLegend: true,
width: '75%',
toggleVisibility: true
};
provide('heatmap', [Tooltip, Legend])
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:legendSettings='legendSettings' :cellSettings='cellSettings'
:paletteSettings='paletteSettings'></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,
},
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' },
],
type: "Fixed"
},
legendSettings: {
position: 'Bottom',
enableSmartLegend: true,
width: '75%',
toggleVisibility: true
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>Legend Title
The legend title displays a specific information about the legend. You can enable the legend title by setting the title property by providing the text and customizing the legend title text style using the textStyle property.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:paletteSettings='paletteSettings' :cellSettings='cellSettings'
:legendSettings='legendSettings'></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'
};
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,
};
const paletteSettings = {
palette: [
{ value: 0, color: '#6EB5D0' },
{ value: 50, color: '#7EDCA2' },
{ value: 100, color: '#DCD57E' },
]
};
const legendSettings = {
position: 'Right',
title: {
text: "1000 US$"
}
};
provide('heatmap', [Tooltip, Legend])
</script><template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
:paletteSettings='paletteSettings' :cellSettings='cellSettings'
:legendSettings='legendSettings'></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'
},
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: '#6EB5D0' },
{ value: 50, color: '#7EDCA2' },
{ value: 100, color: '#DCD57E' },
]
},
legendSettings: {
position: 'Right',
title: {
text: "1000 US$"
}
}
}
},
provide: {
heatmap: [Tooltip, Legend]
}
}
</script>