Search results

Tooltip

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.

Default tooltip

You can enable the tooltip by setting the showTooltip property to true.

tagHelper
tooltip.cs
<ejs-heatmap id='container' dataSource="ViewBag.dataSource" showTooltip="true">
  <e-heatmap-titlesettings text="Sales Revenue per Employee (in 1000 US$)" textStyle="ViewBag.textStyle">
  </e-heatmap-titlesettings>
  <e-heatmap-xaxis labels="ViewBag.xLabels">
  </e-heatmap-xaxis>
  <e-heatmap-yaxis labels="ViewBag.yLabels">
  </e-heatmap-yaxis>
  <e-heatmap-cellsettings showLabel="false"></e-heatmap-cellsettings>
</ejs-heatmap>
public ActionResult Tooltip()
        {
        ViewBag.textStyle = new
        {
         size= "15px",
         fontWeight= "500",
         fontStyle= "Normal",
         fontFamily= "Segoe UI"
        };
            string[] xlabels = new string[8] { "Canada", "China", "Egypt", "Mexico", "Norway", "Russia", "UK", "USA"};
            ViewBag.xLabels = xlabels;
            string[] yLabels = new string[11] { "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010" };
            ViewBag.yLabels = yLabels;
            ViewBag.dataSource = GetDataSource();
            return View();
        }

 private int[,] GetDataSource()
 {
     int[,] data = new int[,]
            {
                [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]
            };
            return data;
 }

Tooltip template

In heatmap, you can customize the tooltip using the tooltipRender client side event.

tagHelper
template.cs
<ejs-heatmap id='container' dataSource="ViewBag.dataSource"  tooltipRender="window.ontooltipRender" showTooltip="true">
  <e-heatmap-titlesettings text="Sales Revenue per Employee (in 1000 US$)" textStyle="ViewBag.textStyle">
  </e-heatmap-titlesettings>
  <e-heatmap-xaxis labels="ViewBag.xLabels">
  </e-heatmap-xaxis>
  <e-heatmap-yaxis labels="ViewBag.yLabels">
  </e-heatmap-yaxis>
  <e-heatmap-cellsettings showLabel="false"></e-heatmap-cellsettings>
</ejs-heatmap>

<script>
  var tooltipRender = function (args) {
    args.content = ['In ' + args.yLabel + ', the ' + args.xLabel + ' produced ' + args.value + ' million barrels per day'];
  };
</script>
public ActionResult Tooltiptemplate()
        {
        ViewBag.textStyle = new
        {
         size= "15px",
         fontWeight= "500",
         fontStyle= "Normal",
         fontFamily= "Segoe UI"
        };
            string[] xlabels = new string[8] { "Canada", "China", "Egypt", "Mexico", "Norway", "Russia", "UK", "USA"};
            ViewBag.xLabels = xlabels;
            string[] yLabels = new string[11] { "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010" };
            ViewBag.yLabels = yLabels;
            ViewBag.dataSource = GetDataSource();
            return View();
        }

 private int[,] GetDataSource()
 {
     int[,] data = new int[,]
            {
                [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]
            };
            return data;
 }