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.

CSHTML

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").TitleSettings(ts => 
ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
yaxis.Labels(ViewBag.yLabels)).PaletteSettings(ps => ps.Palette(palette =>
{
    palette.Value(0).Color("#C2E7EC").Add();
    palette.Value(25000).Color("#AEDFE6").Add();
    palette.Value(50000).Color("#9AD7E0").Add();
    palette.Value(75000).Color("#72C7D4").Add();
    palette.Value(99000).Color("#5EBFCE").Add();
})).LegendSettings(ls =>
ls.Position(Syncfusion.EJ2.HeatMap.LegendPosition.Right)).LegendRender("legendRender")DataSource(ViewBag.dataSource).Render()

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

Default.cs

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