Change the legend label text

17 Feb 20225 minutes to read

You can change the legend label using the LegendRender client-side event. You can also hide the legend label using this client-side event.

<ejs-heatmap id='container' dataSource="ViewBag.dataSource" legendRender="legendRender">
  <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-palettesettings>
        <e-palettes>
            <e-palette value="0" color="#C2E7EC"></e-palette>
            <e-palette value="25000" color="#AEDFE6"></e-palette>
            <e-palette value="50000" color="#9AD7E0"></e-palette>
            <e-palette value="75000" color="#72C7D4"></e-palette>
            <e-palette value="99000" color="#5EBFCE"></e-palette>
        </e-palettes>
  </e-heatmap-palettesettings>
  <e-heatmap-legendsettings position="Right"></e-heatmap-legendsettings>
</ejs-heatmap>

<script>
    var legendRender = function (args) {
        if(args.text=='25,000' || args.text=='50,000'|| args.text=='99,000'){
            args.text = args.text.replace(/,/, "");
            args.text = `${parseInt(args.text/1000)}` + "k "+"$";
        } else {
            args.cancel=true;
        }
    };
</script>
public ActionResult Legend()
{
    ViewBag.textStyle = new
     {
         size= "15px",
         fontWeight= "500",
         fontStyle= "Normal",
         fontFamily= "Segoe UI"
         };
         string[] xlabels = new string[12] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Paul", "Karin", "Mario" };
         ViewBag.xLabels = xlabels;
         string[] yLabels = new string[6] { "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat" };
         ViewBag.yLabels = yLabels;
         ViewBag.dataSource = GetDataSource();
         return View();
}

 private int[,] GetDataSource()
 {
     int[,] data = new int[,]
            {
                {73000, 39000, 26000, 39000, 94000, 0},
                {93000, 58000, 53000, 38000, 26000, 68000},
                {99000, 28000, 22000, 4000, 66000, 9000},
                {14000, 26000, 97000, 69000, 69000, 3000},
                {7000, 46000, 47000, 47000, 88000, 6000},
                {41000, 55000, 73000, 23000, 3000, 79000},
                {56000, 69000, 21000, 86000, 3000, 33000},
                {45000, 7000, 53000, 81000, 95000, 79000},
                {60000, 77000, 74000, 68000, 88000, 51000},
                {25000, 25000, 10000, 12000, 78000, 14000},
                {25000, 56000, 55000, 58000, 12000, 82000},
                {74000, 33000, 88000, 23000, 86000, 59000}
            };
            return data;
 }