ejHeatMapLegend

11 Jul 201814 minutes to read

Legend is a control used to summarize the range of colors in HeatMap. This gives visual guideline for mapping between value and color.

Syntax

 $("#heatmapLegend").ejHeatMapLegend();

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend();
    </script>

Requires

• module:ej.heatmap.base.js
• module:ej.heatmap.js
• module:ej.core.js
• module:ej.data.js
• module:ej.globalize.js
• module:ej.touch.js
• module:ej.scroller.js

Members

width object

Specifies the width of the heatmap legend.

Default Value:

• null

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            width: "400px"
        });
    </script>

height object

Specifies the height of the heatmap legend.

Default Value:

• null

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            height: "400px"
        });
    </script>

isResponsiveboolean

Specifies can enable responsive mode or not for heatmap legend.

Default Value:

• false

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            isResponsive: true
        });
    </script>

showLabelboolean

Specifies whether the cell label can be shown or not.

Default Value:

• false

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            showLabel: false
        });
    </script>

colorMappingCollection array

Specifies the color values of the column data.

Default Value:

• []

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { text: "0" } },
            { value: 100, color: "#0d47a1", label: { text: "100" } }
            ]
        });
    </script>

colorMappingCollection.color string

Specifies the color of the heatmap legend data.

Default Value:

• “white”

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { text: "0" } },
            { value: 100, color: "#0d47a1", label: { text: "100" } }
            ]
        });
    </script>

colorMappingCollection.value number

Specifies the color values of the heatmap legend column data.

Default Value:

• 0

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { text: "0" } },
            { value: 100, color: "#0d47a1", label: { text: "100" } }
            ]
        });
    </script>

colorMappingCollection.label object

Specifies the label properties of the heatmap legend color.

Default Value:

• null

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { text: "0" } },
            { value: 100, color: "#0d47a1", label: { text: "100" } }
            ]
        });
    </script>

colorMappingCollection.label.boldboolean

Enables/disables the bold style of the heatmap legend label.

Default Value:

• false

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { bold: true } }]
        });
    </script>

colorMappingCollection.label.italicboolean

Enables/disables the italic style of the heatmap legend label.

Default Value:

• false

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { italic: true } }]
        });
    </script>

colorMappingCollection.label.text string

specifies the text value of the heatmap legend label.

Default Value:

• ””

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { text: "10" } }]
        });
    </script>

colorMappingCollection.label.textDecoration enum

Specifies the text style of the heatmap legend label.

Name	Description
Underline	Defines a line below the text
Overline	Defines a line above the text
LineThrough	Defines a line through the text
None	Defines a normal text. This is default

Default Value:

• ej.HeatMap.TextDecoration.None

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { textDecoration: ej.HeatMap.TextDecoration.None } }]
        });
    </script>

colorMappingCollection.label.fontSize number

Specifies the font size of the heatmap legend label.

Default Value:

• 10

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { fontSize: 16 } }]
        });
    </script>

colorMappingCollection.label.fontFamily string

Specifies the font family of the heatmap legend label.

Default Value:

• “Arial”

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
                { value: 0, color: "#8ec8f8", label: { fontFamily: "Arial" } }]
        });
    </script>

colorMappingCollection.label.fontColor string

Specifies the font color of the heatmap legend label.

Default Value:

• “black”

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            colorMappingCollection: [
            { value: 0, color: "#8ec8f8", label: { fontColor: "red" } }]
        });
    </script>

orientation enum

Specifies the orientation of the heatmap legend

Name	Description
Horizontal	Scales the graphic content non-uniformly to the width and height of the diagram area
Vertical	Used to align the image at the top left of diagram area

Default Value:

• ej.HeatMap.LegendOrientation.Horizontal

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            orientation: ej.HeatMap.LegendOrientation.Vertical
        });
    </script>

legendMode enum

Specifies the legend mode as gradient or list.

Name	Description
Gradient	Scales the graphic content non-uniformly to the width and height of the diagram area
List	Used to align the image at the top left of diagram area

Default Value:

• ej.HeatMap.LegendMode.Gradient

Example

HTML

<div id="heatmapLegend"></div>
    <script>
        $("#heatmapLegend").ejHeatMapLegend({
            legendMode: ej.HeatMap.LegendMode.List
        });
    </script>