Customizing tooltip as a table

2 Mar 20224 minutes to read

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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").TitleSettings(ts => ts.Text("Crude Oil Production of Non-OPEC Countries (in Million barrels per day)").TextStyle(ViewBag.textStyle)).XAxis(
xAxis =>{ xAxis.Labels(ViewBag.xLabels)}).YAxis(yaxis =>
yaxis.Labels(ViewBag.yLabels)).CellSettings(cs =>
cs.ShowLabel(false)).TooltipSettings(ts =>
            ts.Template("#tooltipTemplate")).ShowTooltip(true).DataSource(ViewBag.dataSource).Render()

<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;
 }