Search results

Create a table in tooltip in ASP.NET Core HeatMap Chart control

You can show a tooltip as a table using the template property in TooltipSettings.

The following steps describe how to show the table tooltip.

Step 1:

Initialize the tooltip template div as shown in the following html page.

Step 2:

Set the element id to the template property in TooltipSettings to show the tooltip template.

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>
  <e-heatmap-tooltipsettings fill="#265259" template="#tooltipTemplate">
    <e-tooltipsettings-textstyle color="#FFFFFF" size="12px"></e-tooltipsettings-textstyle>
    <e-tooltipsettings-border color="#98BABF" width="1"></e-tooltipsettings-border>
  </e-heatmap-tooltipsettings>
</ejs-heatmap>

<script id="tooltipTemplate" type="text/x-template">
    <div id='template'>
        <table>
            <tr bgcolor="pink"><td align="right">${xValue}</td><td>${yValue}:</td><td>${value}</td></tr>
        </table>
    </div>
</script>
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;
 }