# Heat Map Chart

## Description:

Heat Map Chart

The Heat map chart component that uses colors to represent data values in a table. Add color range component to it to define the colors. You can plot data like employee attendance records, a periodic table, tracking investments in the stock market, comparing the performance of different companies, etc

### Allowed Parent Components:

1. Card Body
2. Col
3. Grid Child
4. Horizontal Section
5. Vertical Section

### Allowed Child Components:

1. Color Range
2. Popover
3. Pulse
4. Trigger Before Render
5. Trigger On Click

### Properties

### ➤ Caption

Provide a title for the Chart.

Allowed Values: An expression which should return string after evaluation

### ➤ Sub Caption

Provide a sub title for the chart.

Allowed Values: An expression which should return string after evaluation

### ➤ X Axis Name

Provide a name that you would want to display on the X-axis.

Allowed Values: Free text field

### ➤ Y Axis Name

Provide a name that you would want to display on the Y-axis.

Allowed Values: Free text field

### ➤ Height

Provide numerical values to set heigth in pixels.

Allowed Values: Any number value

### ➤ Width

Provide numerical values to set width in pixels.

Allowed Values: Any number value

### ➤ Min Value

Provide a minimum value that can be plotted on the chart

Allowed Values: Any number value

### ➤ On Click

Allowed Values: Controller Function

### ➤ Use Existing Data Source

Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.

Allowed Values: Yes/No

### ➤ Data Source

Select a datasource from the list.

Allowed Values: Select a datasource from the list.

### ➤ Data Source Alias

Allowed Values: Free text field

### ➤ Default Where Clause

Allowed Values: Free text field

### ➤ Max Rows

Allowed Values: Any number value

### ➤ Order By Clause

e.g. #firstAttr#, #secondAttr# DESC

Allowed Values: Free text field

### ➤ Auto Query

Check this property to query the selected datasource on component render.

Allowed Values: Yes/No

### ➤ Execute Count SQL

Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}

Allowed Values: Yes/No

### ➤ Execute Distinct SQL

Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.

Allowed Values: Yes/No

### ➤ X Axis Value Attribute

It is a column through which you can get the data from DataSource to display along X-axis.

Allowed Values: It is a column through which you can get the data from DataSource to display along X-axis.

### ➤ Y Axis Value Attribute

It is a column through which you can get the data from DataSource to display along Y-axis.

Allowed Values: It is a column through which you can get the data from DataSource to display along Y-axis.

### ➤ Value Attribute

The attribute that contains the value to fill in the chart

Allowed Values: The attribute that contains the value to fill in the chart

### ➤ Function

Select a function to do arithmetic operations on data.

Allowed Values:

1. SUM
2. COUNT
3. AVG
4. MAX
5. MIN
6. COUNT(DISTINCT)

### ➤ Auto Refresh Interval

Specify this property in seconds to refresh the component to specified interval.

Allowed Values: Any number value

### ➤ Show Plot Border

Check this property to show border to the plots.

Allowed Values: Yes/No

### ➤ Show Values

Check this property to show values on the chart.

Allowed Values: Yes/No

### ➤ Show Border

Check this property to show border to the chart.

Allowed Values: Yes/No

### ➤ Show Shadow

Check this property to show shadow to the chart.

Allowed Values: Yes/No

### ➤ Gradient

Check this property to display gradient legend.

Allowed Values: Yes/No

### ➤ Color Code

Provide a hex code to avoid default colors and when color range is not provided.

Allowed Values: Free text field

### ➤ Hide No Data Placeholder

Check this to hide the data displayed when no data found.

Allowed Values: Yes/No

### ➤ No Data Icon

Select an icon to display when no data found.

Allowed Values: Icon List

### ➤ No Data Text1

Provide a text to display as title when no data found.

Allowed Values: Free text field

### ➤ No Data Text2

Provide a text to display as sub title when no data found.

Allowed Values: Free text field