20% Off All Froala Plans

Days

Hours

Minutes

Seconds

x

Heatmap Chart

A heat map chart is a specialized chart that uses colors to represent data values in a table. It is mostly used to plot large and complex data. The chart is visualized like a table with a finite number of rows and columns. Cells within the table are rendered in different colors depending upon the range in which the data value they represent belongs to. An icon legend or a gradient legend, depending on the use case, is rendered at the bottom of the chart. This chart can be used to plot data like employee attendance, performance ratings, election results, and so on.

Caption

The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics. Learn more about it

Subcaption

The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.

Data Plot

Data plot refers to the columns of the pyramid chart.

Data Values

Data values refers to values associated with each section.

X-Axis

X-Axis refers to a line on a chart that runs horizontally (left-right).

Y-Axis

Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero.

X-Axis Labels

X-Axis labels are the names of the data points that are displayed on the x-axis of a chart.

Y-Axis Title

The title of the y-axis

X-Axis Title

The title of the x-axis

Gradient Legend

A gradient legend is a pane of blended colors derived from the colorRange definitions and features a linear scale is drawn with two draggable pointers.

Export menu that appears on top-right of the chart, it offers different options to export a chart.

You can enable or disable chart export using attribute exportEnabled. Refer to Exporting Charts to learn more.

Create a Heatmap Chart

For a detailed list of attributes, refer to the Heatmap Chart attributes page.

CHART

JSON

{
  "chart": {
    "caption": "Bilateral Trade Volume, 2013",
    "subcaption": "A Horizontal Sankey with options to configure the flow representation",
    "theme": "froala",
    "orientation": "horizontal",
    "linkalpha": 30,
    "linkhoveralpha": 60,
    "nodelabelposition": "start"
  },
  "nodes": [
    {
      "label": "Netherlands"
    },
    {
      "label": "Canada"
    },
    {
      "label": "Belgium"
    },
    {
      "label": "Italy"
    },
    {
      "label": "Mexico"
    },
    {
      "label": "Russia"
    },
    {
      "label": "Spain"
    },
    {
      "label": "South Korea"
    },
    {
      "label": "Germany"
    },
    {
      "label": "China"
    },
    {
      "label": "European Union"
    },
    {
      "label": "Japan"
    },
    {
      "label": "United Kingdom"
    },
    {
      "label": "United States"
    },
    {
      "label": "France"
    },
    {
      "label": "Hong Kong"
    },
    {
      "label": "Switzerland"
    },
    {
      "label": "Austria"
    },
    {
      "label": "Sweden"
    }
  ],
  "links": [
    {
      "from": "Netherlands",
      "to": "European Union",
      "value": 798744
    },
    {
      "from": "Germany",
      "to": "European Union",
      "value": 1468990
    },
    {
      "from": "European Union",
      "to": "France",
      "value": 745931
    },
    {
      "from": "European Union",
      "to": "United States",
      "value": 660541
    },
    {
      "from": "Canada",
      "to": "United States",
      "value": 594546
    },
    {
      "from": "Belgium",
      "to": "European Union",
      "value": 628796
    },
    {
      "from": "China",
      "to": "Hong Kong",
      "value": 400571
    },
    {
      "from": "China",
      "to": "United States",
      "value": 526454
    },
    {
      "from": "European Union",
      "to": "United Kingdom",
      "value": 520318
    },
    {
      "from": "China",
      "to": "European Union",
      "value": 560536
    },
    {
      "from": "Italy",
      "to": "European Union",
      "value": 539556
    },
    {
      "from": "Mexico",
      "to": "United States",
      "value": 492715
    },
    {
      "from": "Russia",
      "to": "European Union",
      "value": 385778
    },
    {
      "from": "Spain",
      "to": "European Union",
      "value": 365191
    },
    {
      "from": "China",
      "to": "Japan",
      "value": 312062
    },
    {
      "from": "European Union",
      "to": "Switzerland",
      "value": 328609
    },
    {
      "from": "South Korea",
      "to": "China",
      "value": 229073
    },
    {
      "from": "European Union",
      "to": "Austria",
      "value": 244913
    },
    {
      "from": "Japan",
      "to": "United States",
      "value": 206091
    },
    {
      "from": "European Union",
      "to": "Sweden",
      "value": 204849
    },
    {
      "from": "Germany",
      "to": "United States",
      "value": 184287
    }
  ]
}

HTML

<html>

<head>
      <title>My first chart using FroalaCharts</title>
     
  <script src=https://unpkg.com/[email protected]/froalacharts.js></script>
  <script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script>

  <script type="text/javascript">   
       var data = {  
        chart: {
    theme: "froala",
    caption: "Score card by subject",
    subcaption: "Bell Curve Grading",
    xaxisname: "Subject",
    yaxisname: "Student",
    showvalues: "1",
    valuefontcolor: "#ffffff",
    plottooltext: "$rowlabel's score in $columnlabel : $value/5"
  },
  colorrange: {
    gradient: "1",
    minvalue: "0",
	code: "#28a745",
    mapbypercent: "1",
    startlabel: "Poor",
    endlabel: "Outstanding"
  },
  dataset: [
    {
      data: [
        {
          rowid: "JA",
          columnid: "EN",
          value: "3.7"
        },
        {
          rowid: "JA",
          columnid: "PY",
          value: "4.3"
        },
        {
          rowid: "JA",
          columnid: "MT",
          value: "4.0"
        },
        {
          rowid: "JA",
          columnid: "HS",
          value: "3.3"
        },
        {
          rowid: "JA",
          columnid: "EC",
          value: "3.1"
        },
        {
          rowid: "EM",
          columnid: "EN",
          value: "3.6"
        },
        {
          rowid: "EM",
          columnid: "PY",
          value: "4.0"
        },
        {
          rowid: "EM",
          columnid: "MT",
          value: "3.2"
        },
        {
          rowid: "EM",
          columnid: "HS",
          value: "2.6"
        },
        {
          rowid: "EM",
          columnid: "EC",
          value: "3.2"
        },
        {
          rowid: "JY",
          columnid: "EN",
          value: "3.8"
        },
        {
          rowid: "JY",
          columnid: "PY",
          value: "4.1"
        },
        {
          rowid: "JY",
          columnid: "MT",
          value: "3.9"
        },
        {
          rowid: "JY",
          columnid: "HS",
          value: "2.6"
        },
        {
          rowid: "JY",
          columnid: "EC",
          value: "2"
        },
        {
          rowid: "WL",
          columnid: "EN",
          value: "3.4"
        },
        {
          rowid: "WL",
          columnid: "PY",
          value: "3.2"
        },
        {
          rowid: "WL",
          columnid: "MT",
          value: "4"
        },
        {
          rowid: "WL",
          columnid: "HS",
          value: "2.5"
        },
        {
          rowid: "WL",
          columnid: "EC",
          value: "3.1"
        }
      ]
    }
  ],
  columns: {
    column: [
      {
        id: "EN",
        label: "English"
      },
      {
        id: "MT",
        label: "Maths"
      },
      {
        id: "PY",
        label: "Physics"
      },
      {
        id: "HS",
        label: "History"
      },
      {
        id: "EC",
        label: "Economics"
      }
    ]
  },
  rows: {
    row: [
      {
        id: "JA",
        label: "Jacob"
      },
      {
        id: "EM",
        label: "Emma"
      },
      {
        id: "JY",
        label: "Jayden"
      },
      {
        id: "WL",
        label: "William"
      }
    ]
  }
};
       

FroalaCharts.ready(function () {
            froalacharts = new FroalaCharts({
                id: "chart_1",
                type: 'heatmap',
                renderAt: 'ft',
                width: '800',
                height: '500',
                dataSource: data
            });
            froalacharts.render();
        });
    </script>
    
</head>


<div id="msg" class="mb-20"> Chart data in the selected format will be displayed here.</div>

<body>
    <div id="ft">FroalaCharts will render here</div>
</body>

</html>