ASP.NET MVC
Demos
Support
Forum
Download
Search results

Legend

The legend is used to provide the information about the heat map cell. You can enable the legend by setting the visible property to true.

razor
default.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @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(10).Color("#AEDFE6").Add();
        palette.Value(20).Color("#9AD7E0").Add();
        palette.Value(30).Color("#72C7D4").Add();
        palette.Value(40).Color("#5EBFCE").Add();
        palette.Value(50).Color("#4AB7C8").Add();
        palette.Value(60).Color("#309DAE").Add();
        palette.Value(70).Color("#2B8C9B").Add();
        palette.Value(80).Color("#206974").Add();
        palette.Value(90).Color("#15464D").Add();
        palette.Value(100).Color("#000000").Add();
    })).LegendSettings(ls =>
    ls.Position(Syncfusion.EJ2.HeatMap.LegendPosition.Right)).DataSource(ViewBag.dataSource).Render()
}
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[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }

Legend types

Heat map supports two legend types: Gradient and list type.

  • Gradient - This is a continuous color legend with smooth color transition between palette color values.
  • List - List is a fixed color legend. Each palette color information is shown separately in the list item.

You can change the legend type by using the type property in the paletteSettings property.

razor
types.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @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)).CellSettings(cs =>
    cs.ShowLabel(false)).LegendSettings(ls =>
    ls.Visible(true)).PaletteSettings(ps => ps.Palette(palette =>
    {
        palette.Color("#C06C84").Add();
        palette.Color("#6C5B7B").Add();
        palette.Color("#355C7D").Add();
    }).Type(Syncfusion.EJ2.HeatMap.PaletteType.Fixed)).DataSource(ViewBag.dataSource).Render()
}
public ActionResult LegendTypes()
{
    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();
         ViewBag.textStyle = new { fontStyle = "Italic",fontFamily = "Segoe UI"};
         return View();
}

 private int[,] GetDataSource()
 {
     int[,] data = new int[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }

Placement

You can place the legend at left, right, top, or bottom to the heat map layout by using the position property. The legend is positioned at the right to the heat map by default.

razor
placement.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @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)).LegendSettings(ls =>
    ls.Position(Syncfusion.EJ2.HeatMap.LegendPosition.Top)).DataSource(ViewBag.dataSource).Render()
}
public ActionResult Placement()
{
    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[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }

Alignment

You can align the legend as center, far, or near to the heat map using the alignment property.

razor
alignment.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @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)).LegendSettings(ls =>
    ls.Position(Syncfusion.EJ2.HeatMap.LegendPosition.Top).Alignment(Syncfusion.EJ2.HeatMap.Alignment.Near).Width("150px")).DataSource(ViewBag.dataSource).Render()
}
public ActionResult Alignment()
{
    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[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }

Legend dimensions

You can change the legend dimensions with values in pixels or percentage by using thewidth and height properties.

razor
dimensions.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @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)).LegendSettings(ls =>
    ls.Position(Syncfusion.EJ2.HeatMap.LegendPosition.Right).Height("150px")).DataSource(ViewBag.dataSource).Render()
}
public ActionResult Dimensions()
{
    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[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }

Paging for legend

Paging is available only for the list type legend in the heat map, and it can be enabled by default,when the legend items exceed the legend bounds. You can view each legend items by navigating between the pages using navigation buttons.

razor
paging.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @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(10).Color("#AEDFE6").Add();
        palette.Value(20).Color("#9AD7E0").Add();
        palette.Value(25).Color("#86CFDA").Add();
        palette.Value(30).Color("#72C7D4").Add();
        palette.Value(40).Color("#5EBFCE").Add();
        palette.Value(50).Color("#4AB7C8").Add();
        palette.Value(55).Color("#36AFC2").Add();
        palette.Value(60).Color("#309DAE").Add();
        palette.Value(70).Color("#2B8C9B").Add();
        palette.Value(75).Color("#257A87").Add();
        palette.Value(80).Color("#206974").Add();
        palette.Value(85).Color("#1B5761").Add();
        palette.Value(90).Color("#15464D").Add();
        palette.Value(100).Color("#000000").Add();
    }).Type(Syncfusion.EJ2.HeatMap.PaletteType.Fixed)).LegendSettings(ls =>
    ls.Position(Syncfusion.EJ2.HeatMap.LegendPosition.Right).Height("150px")).DataSource(ViewBag.dataSource).Render()
}
public ActionResult Paging()
{
    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[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }

Smart Legend

Smart legend is another way of showing list type legend with responsiveness and readability, when the palette has more number of items. You can enable this smart legend by using the enableSmartLegend property when the palette type is set to Fixed.

razor
smart-legend.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @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)).CellSettings(cs => cs.ShowLabel(false)).PaletteSettings(ps => ps.Palette(palette =>
    {
        palette.Value(0).Color("#C2E7EC").Add();
        palette.Value(10).Color("#AEDFE6").Add();
        palette.Value(20).Color("#9AD7E0").Add();
        palette.Value(30).Color("#72C7D4").Add();
        palette.Value(40).Color("#5EBFCE").Add();
        palette.Value(50).Color("#4AB7C8").Add();
        palette.Value(60).Color("#309DAE").Add();
        palette.Value(70).Color("#2B8C9B").Add();
        palette.Value(80).Color("#206974").Add();
        palette.Value(90).Color("#15464D").Add();
        palette.Value(100).Color("#000000").Add();
    }).Type(Syncfusion.EJ2.HeatMap.PaletteType.Fixed)).LegendSettings(ls =>
    ls.Position(Syncfusion.EJ2.HeatMap.LegendPosition.Bottom).Width("75%").EnableSmartLegend(true)).DataSource(ViewBag.dataSource).Render()
}
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[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }
Previous
Next