Axis
21 Dec 202224 minutes to read
Heat map consists of two axes namely, X-axis and Y-axis that displays the row headers and column headers to plot the data points respectively. You can define the type, format, and other customizing options for both axes in the heat map.
Types
There are three different axis types available in the heat map, which defines the data type of the axis labels. You can define the axis type by using the valueType
property in the heat map.
Category axis
Category axis type is used to represent the string values in axis labels.
<ejs-heatmap id='container' dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Sales Revenue per Employee (in 1000 US$)" textStyle="ViewBag.textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis vaueType="Category" labels="ViewBag.xLabels">
</e-heatmap-xaxis>
<e-heatmap-yaxis vaueType="Category" labels=" ViewBag.yLabels">
</e-heatmap-yaxis>
</ejs-heatmap>
public ActionResult Category()
{
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;
}
Numeric axis
Numeric axis type is used to represent the numeric values in axis labels.
<ejs-heatmap id='container' dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Sales Revenue per Employee (in 1000 US$)" textStyle="ViewBag.textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis vaueType="Numeric" minimum="1" maximum="11">
</e-heatmap-xaxis>
<e-heatmap-yaxis vaueType="Numeric" minimum="1" maximum="5">
</e-heatmap-yaxis>
</ejs-heatmap>
public ActionResult Numeric()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
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;
}
Date-time axis
Date-time axis type is used to represent the date-time values in axis labels with a specific format. In date-time axis, you can define the start and end date/time using the minimum
and maximum
properties.
@{
var Xminimum = new DateTime(2007, 1, 1);
var Xmaximum = new DateTime(2017, 1, 1);
}
<ejs-heatmap id='container' dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Monthly Flight Traffic at JFK Airport" textStyle="ViewBag.textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis minimum="Xminimum" maximum="Xmaximum" intervalType="Years" valueType="DateTime" labelFormat="yyyy" labelRotation="45" labelIntersectAction="None"></e-heatmap-xaxis>
<e-heatmap-yaxis labels="ViewBag.yLabels">
</e-heatmap-yaxis>
<e-heatmap-cellsettings border="ViewBag.border" showLabel="false" format="{value} flights">
</e-heatmap-cellsettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
public ActionResult DateTime()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
string[] yLabels = new string[12] { "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug",
"Sep", "Oct", "Nov", "Dec"};
ViewBag.yLabels = yLabels;
ViewBag.border = new { width = 0};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
int[,] data = new int[,]
{
{36371, 25675, 28292, 33399, 35980, 38585, 39351, 39964, 36543, 30529, 33298, 36985},
{34702, 27618, 31063, 34525, 36772, 35410, 38750, 39467, 35390, 34196, 35302, 35703},
{34522, 31324, 32128, 34231, 36817, 34381, 37180, 38255, 32776, 32645, 31539, 32981},
{32213, 28755, 29517, 31214, 33747, 33507, 35763, 36837, 32910, 33437, 30659, 31965},
{31282, 28663, 32952, 33941, 34506, 36875, 38836, 35497, 34285, 34094, 32256, 33699},
{31714, 29405, 33745, 32838, 33461, 35034, 36122, 37943, 34128, 30624, 32398, 33522},
{32064, 28387, 33751, 32537, 34034, 35977, 37196, 38301, 33627, 34115, 31072, 33939},
{32417, 27868, 30807, 33386, 35284, 36126, 39753, 40978, 35777, 35277, 31281, 35411},
{32494, 29848, 34385, 35804, 37943, 38722, 41315, 41335, 37177, 37443, 32457, 37304},
{34378, 29576, 30547, 35664, 36622, 38145, 40347, 41868, 38252, 36505, 29576, 36450},
{35219, 31670, 32589, 34927, 36998, 39825, 41126, 42002, 37021, 36583, 32408, 37108}
};
return data;
}
Inversed axis
Heat map supports inversing the axis origin for both axes, where the axis labels are placed in an inversed manner. You can enable axis inversing by enabling the isInversed
property.
@{
var Xminimum = new DateTime(2007, 1, 1);
var Xmaximum = new DateTime(2017, 12, 31);
}
<ejs-heatmap id='container' dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Monthly Flight Traffic at JFK Airport" textStyle=" ViewBag.textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis minimum="Xminimum" maximum="Xmaximum" intervalType="Years" valueType="DateTime" labelFormat="yyyyy" labelRotation="45" labelIntersectAction="None" isInversed="true"></e-heatmap-xaxis>
<e-heatmap-yaxis labels="ViewBag.yLabels">
</e-heatmap-yaxis>
<e-heatmap-cellsettings border="ViewBag.border" showLabel="false" format="{value} flights">
</e-heatmap-cellsettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
public ActionResult Inversed()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
string[] yLabels = new string[12] { "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug",
"Sep", "Oct", "Nov", "Dec"};
ViewBag.yLabels = yLabels;
ViewBag.border = new { width = 0};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
int[,] data = new int[,]
{
{36371, 25675, 28292, 33399, 35980, 38585, 39351, 39964, 36543, 30529, 33298, 36985},
{34702, 27618, 31063, 34525, 36772, 35410, 38750, 39467, 35390, 34196, 35302, 35703},
{34522, 31324, 32128, 34231, 36817, 34381, 37180, 38255, 32776, 32645, 31539, 32981},
{32213, 28755, 29517, 31214, 33747, 33507, 35763, 36837, 32910, 33437, 30659, 31965},
{31282, 28663, 32952, 33941, 34506, 36875, 38836, 35497, 34285, 34094, 32256, 33699},
{31714, 29405, 33745, 32838, 33461, 35034, 36122, 37943, 34128, 30624, 32398, 33522},
{32064, 28387, 33751, 32537, 34034, 35977, 37196, 38301, 33627, 34115, 31072, 33939},
{32417, 27868, 30807, 33386, 35284, 36126, 39753, 40978, 35777, 35277, 31281, 35411},
{32494, 29848, 34385, 35804, 37943, 38722, 41315, 41335, 37177, 37443, 32457, 37304},
{34378, 29576, 30547, 35664, 36622, 38145, 40347, 41868, 38252, 36505, 29576, 36450},
{35219, 31670, 32589, 34927, 36998, 39825, 41126, 42002, 37021, 36583, 32408, 37108}
};
return data;
}
Opposed axis
In heat map, you can place the axis label in an opposite position of its default axis label position by using the opposedPosition
property.
@{
var Xminimum = new DateTime(2007, 1, 1);
var Xmaximum = new DateTime(2017, 1, 1);
}
<ejs-heatmap id='container' dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Monthly Flight Traffic at JFK Airport" textStyle="ViewBag.textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis minimum="Xminimum" maximum="Xmaximum" intervalType="Years" valueType="DateTime" labelFormat="yyyy" labelRotation="45" labelIntersectAction="None" opposedPosition="true">
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="ViewBag.yLabels">
</e-heatmap-yaxis>
<e-heatmap-cellsettings border="ViewBag.border" showLabel="false" format="{value} flights">
</e-heatmap-cellsettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
public ActionResult Opposed()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
string[] yLabels = new string[12] { "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug",
"Sep", "Oct", "Nov", "Dec"};
ViewBag.yLabels = yLabels;
ViewBag.border = new { width = 0};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
int[,] data = new int[,]
{
{36371, 25675, 28292, 33399, 35980, 38585, 39351, 39964, 36543, 30529, 33298, 36985},
{34702, 27618, 31063, 34525, 36772, 35410, 38750, 39467, 35390, 34196, 35302, 35703},
{34522, 31324, 32128, 34231, 36817, 34381, 37180, 38255, 32776, 32645, 31539, 32981},
{32213, 28755, 29517, 31214, 33747, 33507, 35763, 36837, 32910, 33437, 30659, 31965},
{31282, 28663, 32952, 33941, 34506, 36875, 38836, 35497, 34285, 34094, 32256, 33699},
{31714, 29405, 33745, 32838, 33461, 35034, 36122, 37943, 34128, 30624, 32398, 33522},
{32064, 28387, 33751, 32537, 34034, 35977, 37196, 38301, 33627, 34115, 31072, 33939},
{32417, 27868, 30807, 33386, 35284, 36126, 39753, 40978, 35777, 35277, 31281, 35411},
{32494, 29848, 34385, 35804, 37943, 38722, 41315, 41335, 37177, 37443, 32457, 37304},
{34378, 29576, 30547, 35664, 36622, 38145, 40347, 41868, 38252, 36505, 29576, 36450},
{35219, 31670, 32589, 34927, 36998, 39825, 41126, 42002, 37021, 36583, 32408, 37108}
};
return data;
}
Label formatting
Heat map supports formatting the axis labels by using the labelFormat
property. Using this property, you can customize the axis label by global string format (‘P’, ‘C’, etc) or customized format like ‘{value}°C’.
@{
var Xminimum = new DateTime(2007, 1, 1);
}
<ejs-heatmap id='container' dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Monthly Flight Traffic at JFK Airport" textStyle=" ViewBag.textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis minimum="Xminimum" intervalType="Years" valueType="DateTime" labelFormat="yyyy">
</e-heatmap-xaxis>
<e-heatmap-yaxis valueType="Numeric" labelFormat="${value}">
</e-heatmap-yaxis>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
public ActionResult LabelFormat()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
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;
}
Axis intervals
In heat map, you can define an interval between the axis labels using the interval
property. In date-time axis, you can change the interval mode by using the intervalType
property. The date-time axis supports the following interval types:
- Years
- Months
- Days
- Hours
- Minutes
@{
var Xminimum = new DateTime(2007, 1, 1);
var Xmaximum = new DateTime(2017, 1, 1);
}
<ejs-heatmap id='container' dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Monthly Flight Traffic at JFK Airport" textStyle=" ViewBag.textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis minimum="Xminimum" minimum="Xmaximum" intervalType="Years" valueType="DateTime" labelFormat="yyyy" interval="2">
</e-heatmap-xaxis>
<e-heatmap-yaxis label=" ViewBag.yLabels">
</e-heatmap-yaxis>
<e-heatmap-cellsettings border="ViewBag.border" showLabel="false" format="{value} flights">
</e-heatmap-cellsettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
public ActionResult Interval()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
string[] yLabels = new string[12] { "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug",
"Sep", "Oct", "Nov", "Dec"};
ViewBag.yLabels = yLabels;
ViewBag.border = new { width = 0};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
int[,] data = new int[,]
{
{36371, 25675, 28292, 33399, 35980, 38585, 39351, 39964, 36543, 30529, 33298, 36985},
{34702, 27618, 31063, 34525, 36772, 35410, 38750, 39467, 35390, 34196, 35302, 35703},
{34522, 31324, 32128, 34231, 36817, 34381, 37180, 38255, 32776, 32645, 31539, 32981},
{32213, 28755, 29517, 31214, 33747, 33507, 35763, 36837, 32910, 33437, 30659, 31965},
{31282, 28663, 32952, 33941, 34506, 36875, 38836, 35497, 34285, 34094, 32256, 33699},
{31714, 29405, 33745, 32838, 33461, 35034, 36122, 37943, 34128, 30624, 32398, 33522},
{32064, 28387, 33751, 32537, 34034, 35977, 37196, 38301, 33627, 34115, 31072, 33939},
{32417, 27868, 30807, 33386, 35284, 36126, 39753, 40978, 35777, 35277, 31281, 35411},
{32494, 29848, 34385, 35804, 37943, 38722, 41315, 41335, 37177, 37443, 32457, 37304},
{34378, 29576, 30547, 35664, 36622, 38145, 40347, 41868, 38252, 36505, 29576, 36450},
{35219, 31670, 32589, 34927, 36998, 39825, 41126, 42002, 37021, 36583, 32408, 37108}
};
return data;
}
Axis label increment
Axis label increment in the heat map is used to display the axis labels with regular interval values in numeric and date-time axes. The labels will be displayed with tick gaps when you set the label interval. But, to achieve the same behavior without tick gaps, use the label increment. You can set the axis label increment using the increment
property and the default value of this property is 1.
<ejs-heatmap id='container' dataSource="ViewBag.dataSource">
<e-heatmap-xaxis minimum="0" increment="2" valueType="Numeric">
</e-heatmap-xaxis>
<e-heatmap-yaxis minimum="0" increment="3" valueType="Numeric">
</e-heatmap-yaxis>
</ejs-heatmap>
public ActionResult Increment()
{
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;
}
Limiting labels in date-time axis
You can display the axis labels at specific time intervals along with the date-time axis using the showLabelOn
property. This property supports the following types:
- None: Displays the axis labels based on the
intervalType
andinterval
property of the axis. This type is default value of theshowLabelOn
property. - Years: Displays the axis labels on every year between given date-time range.
- Months: Displays the axis labels on every month between given date-time range.
- Days: Displays the axis labels on every day between given date-time range.
- Minutes: Displays the axis labels on every minute between given date-time range.
@{
var Xminimum = new DateTime(2017, 6, 23);
var Xmaximum = new DateTime(2018, 6, 30);
}
<ejs-heatmap id='container' height="280px" tooltipRender="window.ontooltipRender" dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Summary of merge requests in GitLab" textStyle="ViewBag.textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis opposedPosition="true" minimum="Xminimum" maximum="Xmaximum" intervalType="Days" valueType="DateTime" labelFormat="MMM" showLabelOn="Months" increment="7"></e-heatmap-xaxis>
<e-heatmap-yaxis labels="ViewBag.yLabels" isInversed="true"></e-heatmap-yaxis>
<e-heatmap-palettesettings type="Fixed" emptyPointColor="white">
<e-palettes>
<e-palette value="0" color="rgb(238,238,238)" label="No contributions"></e-palette>
<e-palette value="1" color="rgb(172, 213, 242)" label="1-15 contributions"></e-palette>
<e-palette value="16" color="rgb(127, 168, 201)" label="16-31 contributions"></e-palette>
<e-palette value="32" color="rgb(82, 123, 160)" label="31-49 contributions"></e-palette>
<e-palette value="50" color="rgb(37, 78, 119)" label="50+ contributions"></e-palette>
</e-palettes>
</e-heatmap-palettesettings>
<e-heatmap-cellsettings border="ViewBag.border" showLabel="false"></e-heatmap-cellsettings>
<e-heatmap-legendsettings position="Bottom" width="20%" showLabel="true" alignment="Near" labelDisplayType="None" enableSmartLegend="true"></e-heatmap-legendsettings>
</ejs-heatmap>
<script>
window.ontooltipRender = function (args) {
var intl = new ej.base.Internationalization();
var format = intl.getDateFormat({ format: 'EEE MMM dd, yyyy' });
var newDate = args.xValue;
var date = new Date(newDate.getTime());
var axisLabel = args.heatmap.axisCollections[1].axisLabels;
var index = axisLabel.indexOf(args.yLabel);
(date).setDate((date).getDate() + index);
var value = format(date);
args.content = [(args.value === 0 ? 'No' : args.value) + ' ' + 'contributions' + '<br>' + value];
}
</script>
public ActionResult ShowLabel()
{
ViewBag.textStyle = new
{
size = "15px",
fontWeight = "500",
fontStyle = "Normal",
fontFamily = "Segoe UI"
};
string[] yLabels = new string[7] { "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
ViewBag.yLabels = yLabels;
ViewBag.border = new { color = "white" };
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
int?[,] dataSource = new int?[,]
{
{ null, null, null, null, 16, 48, 0 },
{0, 15, 0, 24, 0, 39, 0},
{ 0, 18, 37, 0, 0, 50, 0},
{ 0, 10, 0, 0, 44, 5, 0},
{ 0, 36, 0, 45, 20, 18, 0},
{ 0, 28, 1, 42, 0, 10, 0},
{ 0, 16, 32, 0, 1, 25, 0},
{ 0, 31, 2, 9, 24, 0, 0},
{ 0, 8, 47, 0, 0, 35, 0},
{ 0, 31, 0, 0, 0, 40, 0},
{ 0, 8, 0, 27, 0, 35, 0},
{0, 12, 9, 45, 0, 8, 0},
{0, 0, 13, 0, 22, 10, 0},
{0, 16, 32, 0, 1, 25, 0},
{0, 31, 2, 9, 24, 0, 0},
{0, 8, 47, 27, 0, 35, 0},
{0, 28, 14, 10, 0, 0, 0},
{0, 36, 0, 45, 20, 18, 0},
{0, 28, 1, 42, 0, 10, 0},
{0, 31, 0, 24, 0, 40, 0},
{0, 8, 47, 27, 0, 35, 0},
{0, 36, 0, 45, 20, 18, 0},
{0, 28, 1, 42, 0, 10, 0},
{0, 31, 0, 24, 0, 40, 0},
{0, 16, 32, 0, 1, 25, 0},
{0, 31, 2, 9, 24, 0, 0},
{0, 8, 47, 27, 0, 35, 0},
{0, 10, 0, 36, 23, 19, 0},
{0, 18, 37, 23, 0, 50, 0},
{0, 28, 14, 10, 0, 0, 0},
{0, 18, 37, 23, 0, 50, 0},
{0, 18, 37, 23, 0, 50, 0},
{0, 28, 14, 10, 0, 0, 0},
{0, 31, 2, 9, 24, 0, 0},
{0, 8, 47, 27, 0, 35, 0},
{0, 10, 2, 0, 44, 5, 0},
{0, 36, 0, 45, 20, 18, 0},
{0, 28, 1, 42, 0, 10, 0},
{0, 31, 0, 24, 0, 40, 1},
{0, 16, 32, 0, 1, 25, 0},
{0, 31, 2, 9, 24, 0, 0},
{0, 8, 47, 27, 0, 35, 0},
{0, 10, 2, 0, 44, 5, 0},
{0, 12, 9, 45, 0, 8, 0},
{0, 0, 13, 35, 22, 10, 0},
{0, 28, 14, 10, 0, 0, 0},
{0, 36, 0, 45, 20, 18, 2},
{0, 28, 1, 42, 0, 10, 0},
{0, 31, 0, 24, 0, 40, 1},
{0, 8, 47, 27, 0, 35, 0},
{0, 10, 2, 0, 44, 5, 0},
{0, 31, 2, 9, 24, 0, 1},
{0, 8, 47, 27, 0, 35, 40},
{0, 10, 2, 0, 44, 5, null},
};
return data;
}
Multi Level Labels
You can add many levels of labels using the multiLevelLabels
property. This property can be configured using the following properties:
- Categories
- Overflow
- Alignment
- Text style
- Border
Categories
Using this property, you can configure the start
, end
, text
, maximumTextWidth
of the multilevel labels.
@{
@{
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Normal" };
var xAxisLabel = new string[] {"Laptop", "Mobile", "Gaming", "Cosmetics", "Fragrance", "Watches", "Handbags", "Apparel",
"Kitchenware", "Furniture", "Home Decor" };
var yAxisLabel = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
}
}
<ejs-heatmap id='container' load="window.onHeatmapLoad" dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Product wise Monthly sales revenue for a e-commerce website" textStyle="textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis labels="xAxisLabel">
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="yAxisLabel">
</e-heatmap-yaxis>
<e-heatmap-palettesettings>
<e-palettes>
<e-palette color="#F0ADCE"></e-palette>
<e-palette color="#19307B"></e-palette>
</e-palettes>
</e-heatmap-palettesettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
<script type="text/javascript">
window.onHeatmapLoad = function (args) {
args.heatmap.xAxis.multiLevelLabels[0].categories = [{ start: 0, end: 2, text: 'Electronics', },
{ start: 3, end: 4, text: 'Beauty and personal care', },
{ start: 5, end: 7, text: 'Fashion', },
{ start: 8, end: 10, text: 'Household', }];
args.heatmap.yAxis.multiLevelLabels[0].categories = [{ start: 0, end: 2, text: 'Q1' },
{ start: 3, end: 5, text: 'Q2' },
{ start: 6, end: 8, text: 'Q3' },
{ start: 9, end: 11, text: 'Q4' }
];
}
</script>
public ActionResult MultiLevelLabel()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
Double[,] dataSource = new Double[,]
{
{52, 65, 67, 45, 37, 52,32, 76, 60, 64, 82, 91 },
{68, 52, 63, 51, 30, 51, 51, 81, 70, 60, 88, 80 },
{60, 50, 42, 53, 66, 70, 41, 69, 76, 74, 86, 97},
{66, 64, 46, 40, 47, 41, 45, 76, 83, 69, 92, 84},
{65, 42, 58, 32, 36, 44, 49, 79, 83, 69, 83, 93},
{54, 46, 61, 46, 40, 39, 41, 69, 61, 84, 84, 87},
{48, 46, 61, 47, 49, 41, 41, 67, 78, 83, 98, 87},
{69, 52, 41, 44, 41, 52, 46, 71, 63, 84, 83, 91},
{50, 59, 44, 43, 27, 42, 26, 64, 76, 65, 81, 86},
{47, 49, 66, 53, 50, 34, 31, 79, 78, 79, 89, 95},
{61, 40, 62, 26, 34, 54, 56, 74, 83, 78, 95, 98}
};
return dataSource;
}
Overflow
Using this property, you can trim and wrap the multilevel labels.
NOTE
This support works in x-axis only.
@{
@{
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Normal" };
var xAxisLabel = new string[] {"Laptop", "Mobile", "Gaming", "Cosmetics", "Fragrance", "Watches", "Handbags", "Apparel",
"Kitchenware", "Furniture", "Home Decor" };
var yAxisLabel = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
}
}
<ejs-heatmap id='container' load="window.onHeatmapLoad" dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Product wise Monthly sales revenue for a e-commerce website" textStyle="textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis labels="xAxisLabel">
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="yAxisLabel">
</e-heatmap-yaxis>
<e-heatmap-palettesettings>
<e-palettes>
<e-palette color="#F0ADCE"></e-palette>
<e-palette color="#19307B"></e-palette>
</e-palettes>
</e-heatmap-palettesettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
<script type="text/javascript">
window.onHeatmapLoad = function (args) {
args.heatmap.xAxis.multiLevelLabels[0].categories = [{ start: 0, end: 2, text: 'Electronics', },
{ start: 3, end: 4, text: 'Beauty and personal care', },
{ start: 5, end: 7, text: 'Fashion', },
{ start: 8, end: 10, text: 'Household', }];
args.heatmap.yAxis.multiLevelLabels[0].categories = [{ start: 0, end: 2, text: 'Q1' },
{ start: 3, end: 5, text: 'Q2' },
{ start: 6, end: 8, text: 'Q3' },
{ start: 9, end: 11, text: 'Q4' }
];
}
</script>
public ActionResult MultiLevelLabel()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
Double[,] dataSource = new Double[,]
{
{52, 65, 67, 45, 37, 52,32, 76, 60, 64, 82, 91 },
{68, 52, 63, 51, 30, 51, 51, 81, 70, 60, 88, 80 },
{60, 50, 42, 53, 66, 70, 41, 69, 76, 74, 86, 97},
{66, 64, 46, 40, 47, 41, 45, 76, 83, 69, 92, 84},
{65, 42, 58, 32, 36, 44, 49, 79, 83, 69, 83, 93},
{54, 46, 61, 46, 40, 39, 41, 69, 61, 84, 84, 87},
{48, 46, 61, 47, 49, 41, 41, 67, 78, 83, 98, 87},
{69, 52, 41, 44, 41, 52, 46, 71, 63, 84, 83, 91},
{50, 59, 44, 43, 27, 42, 26, 64, 76, 65, 81, 86},
{47, 49, 66, 53, 50, 34, 31, 79, 78, 79, 89, 95},
{61, 40, 62, 26, 34, 54, 56, 74, 83, 78, 95, 98}
};
return dataSource;
}
Alignment
This property provides an option to position the multilevel labels at far, center, and near.
@{
@{
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Normal" };
var xAxisLabel = new string[] {"Laptop", "Mobile", "Gaming", "Cosmetics", "Fragrance", "Watches", "Handbags", "Apparel",
"Kitchenware", "Furniture", "Home Decor" };
var yAxisLabel = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
}
}
<ejs-heatmap id='container' load="window.onHeatmapLoad" dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Product wise Monthly sales revenue for a e-commerce website" textStyle="textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis labels="xAxisLabel">
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="yAxisLabel">
</e-heatmap-yaxis>
<e-heatmap-palettesettings>
<e-palettes>
<e-palette color="#F0ADCE"></e-palette>
<e-palette color="#19307B"></e-palette>
</e-palettes>
</e-heatmap-palettesettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
<script type="text/javascript">
window.onHeatmapLoad = function (args) {
args.heatmap.xAxis.multiLevelLabels[0].categories = [{ start: 0, end: 2, text: 'Electronics', },
{ start: 3, end: 4, text: 'Beauty and personal care', },
{ start: 5, end: 7, text: 'Fashion', },
{ start: 8, end: 10, text: 'Household', }];
args.heatmap.yAxis.multiLevelLabels[0].categories = [{ start: 0, end: 2, text: 'Q1' },
{ start: 3, end: 5, text: 'Q2' },
{ start: 6, end: 8, text: 'Q3' },
{ start: 9, end: 11, text: 'Q4' }
];
}
</script>
public ActionResult MultiLevelLabel()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
Double[,] dataSource = new Double[,]
{
{52, 65, 67, 45, 37, 52,32, 76, 60, 64, 82, 91 },
{68, 52, 63, 51, 30, 51, 51, 81, 70, 60, 88, 80 },
{60, 50, 42, 53, 66, 70, 41, 69, 76, 74, 86, 97},
{66, 64, 46, 40, 47, 41, 45, 76, 83, 69, 92, 84},
{65, 42, 58, 32, 36, 44, 49, 79, 83, 69, 83, 93},
{54, 46, 61, 46, 40, 39, 41, 69, 61, 84, 84, 87},
{48, 46, 61, 47, 49, 41, 41, 67, 78, 83, 98, 87},
{69, 52, 41, 44, 41, 52, 46, 71, 63, 84, 83, 91},
{50, 59, 44, 43, 27, 42, 26, 64, 76, 65, 81, 86},
{47, 49, 66, 53, 50, 34, 31, 79, 78, 79, 89, 95},
{61, 40, 62, 26, 34, 54, 56, 74, 83, 78, 95, 98}
};
return dataSource;
}
Text Customization
The textStyle
property of multilevel labels provides options to customize the size, color, fontFamily, fontWeight, fontStyle, opacity, textAlignment and textOverflow.
@{
@{
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Normal" };
var xAxisLabel = new string[] {"Laptop", "Mobile", "Gaming", "Cosmetics", "Fragrance", "Watches", "Handbags", "Apparel",
"Kitchenware", "Furniture", "Home Decor" };
var yAxisLabel = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
}
}
<ejs-heatmap id='container' load="window.onHeatmapLoad" dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Product wise Monthly sales revenue for a e-commerce website" textStyle="textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis labels="xAxisLabel">
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="yAxisLabel">
</e-heatmap-yaxis>
<e-heatmap-palettesettings>
<e-palettes>
<e-palette color="#F0ADCE"></e-palette>
<e-palette color="#19307B"></e-palette>
</e-palettes>
</e-heatmap-palettesettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
<script type="text/javascript">
window.onHeatmapLoad = function (args) {
args.heatmap.xAxis.multiLevelLabels[0].categories = [{ start: 0, end: 2, text: 'Electronics', },
{ start: 3, end: 4, text: 'Beauty and personal care', },
{ start: 5, end: 7, text: 'Fashion', },
{ start: 8, end: 10, text: 'Household', }];
args.heatmap.yAxis.multiLevelLabels[0].categories = [{ start: 0, end: 2, text: 'Q1' },
{ start: 3, end: 5, text: 'Q2' },
{ start: 6, end: 8, text: 'Q3' },
{ start: 9, end: 11, text: 'Q4' }
];
}
</script>
public ActionResult MultiLevelLabel()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
Double[,] dataSource = new Double[,]
{
{52, 65, 67, 45, 37, 52,32, 76, 60, 64, 82, 91 },
{68, 52, 63, 51, 30, 51, 51, 81, 70, 60, 88, 80 },
{60, 50, 42, 53, 66, 70, 41, 69, 76, 74, 86, 97},
{66, 64, 46, 40, 47, 41, 45, 76, 83, 69, 92, 84},
{65, 42, 58, 32, 36, 44, 49, 79, 83, 69, 83, 93},
{54, 46, 61, 46, 40, 39, 41, 69, 61, 84, 84, 87},
{48, 46, 61, 47, 49, 41, 41, 67, 78, 83, 98, 87},
{69, 52, 41, 44, 41, 52, 46, 71, 63, 84, 83, 91},
{50, 59, 44, 43, 27, 42, 26, 64, 76, 65, 81, 86},
{47, 49, 66, 53, 50, 34, 31, 79, 78, 79, 89, 95},
{61, 40, 62, 26, 34, 54, 56, 74, 83, 78, 95, 98}
};
return dataSource;
}
Border Customization
Using the border
property, you can customize the width, color, and type. The types of border are Rectangle
, WithoutTopBorder
, WithoutBottomBorder
, WithoutTopAndBottomBorder
, Brace
, WithoutBorder
.
@{
@{
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Normal" };
var xAxisLabel = new string[] {"Laptop", "Mobile", "Gaming", "Cosmetics", "Fragrance", "Watches", "Handbags", "Apparel",
"Kitchenware", "Furniture", "Home Decor" };
var yAxisLabel = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
var yBorder = new
{
type = "Brace",
color = "#a19d9d"
};
var xAxisBorder = new
{
type = "Brace",
color = "#a19d9d",
width = 1
};
}
}
<ejs-heatmap id='container' load="window.onHeatmapLoad" tooltipRender="window.onHeatmapTooltipRender" cellRender="window.onHeatmapCellRender" dataSource="ViewBag.dataSource">
<e-heatmap-titlesettings text="Product wise Monthly sales revenue for a e-commerce website" textStyle="textStyle">
</e-heatmap-titlesettings>
<e-heatmap-xaxis labels="xAxisLabel" border="ViewBag.AxisBorder">
<e-xaxis-multilevellabels>
<e-xaxis-multilevellabel border="xAxisBorder" >
</e-xaxis-multilevellabel>
</e-xaxis-multilevellabels>
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="yAxisLabel">
<e-yaxis-multilevellabels>
<e-yaxis-multilevellabel border="yBorder"></e-yaxis-multilevellabel>
</e-yaxis-multilevellabels>
</e-heatmap-yaxis>
<e-heatmap-palettesettings>
<e-palettes>
<e-palette color="#F0ADCE"></e-palette>
<e-palette color="#19307B"></e-palette>
</e-palettes>
</e-heatmap-palettesettings>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
public ActionResult MultiLevelLabel()
{
ViewBag.textStyle = new
{
size= "15px",
fontWeight= "500",
fontStyle= "Normal",
fontFamily= "Segoe UI"
};
ViewBag.dataSource = GetDataSource();
return View();
}
private int[,] GetDataSource()
{
Double[,] dataSource = new Double[,]
{
{52, 65, 67, 45, 37, 52,32, 76, 60, 64, 82, 91 },
{68, 52, 63, 51, 30, 51, 51, 81, 70, 60, 88, 80 },
{60, 50, 42, 53, 66, 70, 41, 69, 76, 74, 86, 97},
{66, 64, 46, 40, 47, 41, 45, 76, 83, 69, 92, 84},
{65, 42, 58, 32, 36, 44, 49, 79, 83, 69, 83, 93},
{54, 46, 61, 46, 40, 39, 41, 69, 61, 84, 84, 87},
{48, 46, 61, 47, 49, 41, 41, 67, 78, 83, 98, 87},
{69, 52, 41, 44, 41, 52, 46, 71, 63, 84, 83, 91},
{50, 59, 44, 43, 27, 42, 26, 64, 76, 65, 81, 86},
{47, 49, 66, 53, 50, 34, 31, 79, 78, 79, 89, 95},
{61, 40, 62, 26, 34, 54, 56, 74, 83, 78, 95, 98}
};
return dataSource;
}