ejHeatMapLegend

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>