Tooltip is used to provide the details of the heatmap cell, and this can be displayed, while hovering the cursor over the cell or performing tap action in touch devices.
You can enable the tooltip by setting the showTooltip
property to true and injecting the Tooltip
module into the provide
.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings' :showTooltip='showTooltip'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[0.72, 0.71, 0.71, 0.67, 0.72, 0.53, 0.53, 0.56, 0.58, 0.56],
[2.28, 2.29, 2.09, 1.84, 1.64, 1.49, 1.49, 1.39, 1.32, 1.23],
[2.02, 2.17, 2.30, 2.39, 2.36, 2.52, 2.62, 2.57, 2.57, 2.74],
[3.21, 3.26, 3.45, 3.47, 3.42, 3.34, 3.14, 2.83, 2.64, 2.61],
[3.22, 3.13, 3.04, 2.95, 2.69, 2.49, 2.27, 2.18, 2.06, 1.87],
[3.30, 3.39, 3.40, 3.48, 3.60, 3.67, 3.73, 3.79, 3.79, 4.07],
[5.80, 5.74, 5.64, 5.44, 5.18, 5.08, 5.07, 5.00, 5.35, 5.47],
[6.91, 7.40, 8.13, 8.80, 9.04, 9.24, 9.43, 9.35, 9.49, 9.69]
],
titleSettings: {
text: 'Crude Oil Production of Non-OPEC Countries (in Million barrels per day)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Canada', 'China', 'Egypt', 'Mexico', 'Norway', 'Russia', 'UK', 'USA']
},
yAxis: {
labels: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010']
},
cellSettings: {
showLabel: false,
},
showTooltip: true
}
},
provide:{
heatmap:[Tooltip, Legend]
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
In heatmap, you can customize the tooltip using the tooltipRender
client side event.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings' :showTooltip='showTooltip' :tooltipRender='tooltipRender'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[0.72, 0.71, 0.71, 0.67, 0.72, 0.53, 0.53, 0.56, 0.58, 0.56],
[2.28, 2.29, 2.09, 1.84, 1.64, 1.49, 1.49, 1.39, 1.32, 1.23],
[2.02, 2.17, 2.30, 2.39, 2.36, 2.52, 2.62, 2.57, 2.57, 2.74],
[3.21, 3.26, 3.45, 3.47, 3.42, 3.34, 3.14, 2.83, 2.64, 2.61],
[3.22, 3.13, 3.04, 2.95, 2.69, 2.49, 2.27, 2.18, 2.06, 1.87],
[3.30, 3.39, 3.40, 3.48, 3.60, 3.67, 3.73, 3.79, 3.79, 4.07],
[5.80, 5.74, 5.64, 5.44, 5.18, 5.08, 5.07, 5.00, 5.35, 5.47],
[6.91, 7.40, 8.13, 8.80, 9.04, 9.24, 9.43, 9.35, 9.49, 9.69]
],
titleSettings: {
text: 'Crude Oil Production of Non-OPEC Countries (in Million barrels per day)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Canada', 'China', 'Egypt', 'Mexico', 'Norway', 'Russia', 'UK', 'USA']
},
yAxis: {
labels: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010']
},
cellSettings: {
showLabel: false,
},
showTooltip: true
}
},
provide:{
heatmap:[Tooltip, Legend]
},
methods: {
tooltipRender: function(args)
{
args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
The fill
and border
properties are used to customize the background color and border of the Tooltip respectively. The textStyle
property in the Tooltip is used to customize the font of the tooltip text.
<template>
<div id="app">
<ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource' :cellSettings='cellSettings' :showTooltip='showTooltip' :paletteSettings='paletteSettings' :tooltipSettings='tooltipSettings' :tooltipRender='tooltipRender'></ejs-heatmap>
</div>
</template>
<script>
import Vue from 'vue';
import { HeatMapPlugin, Tooltip, Legend } from '@syncfusion/ej2-vue-heatmap';
Vue.use(HeatMapPlugin);
export default {
data: function() {
return {
dataSource: [
[0.72, 0.71, 0.71, 0.67, 0.72, 0.53, 0.53, 0.56, 0.58, 0.56],
[2.28, 2.29, 2.09, 1.84, 1.64, 1.49, 1.49, 1.39, 1.32, 1.23],
[2.02, 2.17, 2.30, 2.39, 2.36, 2.52, 2.62, 2.57, 2.57, 2.74],
[3.21, 3.26, 3.45, 3.47, 3.42, 3.34, 3.14, 2.83, 2.64, 2.61],
[3.22, 3.13, 3.04, 2.95, 2.69, 2.49, 2.27, 2.18, 2.06, 1.87],
[3.30, 3.39, 3.40, 3.48, 3.60, 3.67, 3.73, 3.79, 3.79, 4.07],
[5.80, 5.74, 5.64, 5.44, 5.18, 5.08, 5.07, 5.00, 5.35, 5.47],
[6.91, 7.40, 8.13, 8.80, 9.04, 9.24, 9.43, 9.35, 9.49, 9.69]
],
titleSettings: {
text: 'Crude Oil Production of Non-OPEC Countries (in Million barrels per day)',
textStyle: {
size: '15px',
fontWeight: '500',
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
}
},
xAxis: {
labels: ['Canada', 'China', 'Egypt', 'Mexico', 'Norway', 'Russia', 'UK', 'USA']
},
yAxis: {
labels: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010']
},
cellSettings: {
showLabel: false,
},
paletteSettings: {
palette: [
{ color: '#F0ADCE' },
{ color: '#19307B' }
]
},
tooltipSettings: {
fill: '#696295',
textStyle: {
color: '#FFFFFF',
size: '12px'
},
border: {
width: 2,
color: '#F0C27B'
}
},
showTooltip: true
}
},
provide:{
heatmap:[Tooltip, Legend]
},
methods: {
tooltipRender: function(args)
{
args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-vue-heatmap/styles/material.css';
</style>
Note: To use tooltip feature, we need to inject Tooltip
module into the provide
.