> For the complete documentation index, see [llms.txt](https://nocode-artisan.gitbook.io/plotly-charts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/traces/statistical-charts/heatmap.md).

# Heatmap

### Color Scale Options

<details>

<summary>Color Scale</summary>

**Type**: colorscale

**Documentation**: Sets the colorscale. The colorscale must be an array containing arrays mapping a normalized value to an rgb, rgba, hex, hsl, hsv, or named color string. At minimum, a mapping for the lowest (0) and highest (1) values are required. For example, `[[0, 'rgb(0,0,255)'], [1, 'rgb(255,0,0)']]`. To control the bounds of the colorscale in color space, use `zmin` and `zmax`. Alternatively, `colorscale` may be a palette name string of the following list: Blackbody,Bluered,Blues,Cividis,Earth,Electric,Greens,Greys,Hot,Jet,Picnic,Portland,Rainbow,RdBu,Reds,Viridis,YlGnBu,YlOrRd.

**Path**: data.index.colorscale

</details>

<details>

<summary>Reverse Scale</summary>

**Default Value**: false

**Type**: boolean

**Documentation**: Reverses the color mapping if true. If true, `zmin` will correspond to the last color in the array and `zmax` will correspond to the first color.

**Path**: data.index.reversescale

</details>

<details>

<summary>Show Scale</summary>

**Default Value**: true

**Type**: boolean

**Documentation**: Determines whether or not a colorbar is displayed for this trace.

**Path**: data.index.showscale

</details>

<details>

<summary>Z Auto</summary>

**Default Value**: true

**Type**: boolean

**Documentation**: Determines whether or not the color domain is computed with respect to the input data (here in `z`) or the bounds set in `zmin` and `zmax` Defaults to `false` when `zmin` and `zmax` are set by the user.

**Path**: data.index.zauto

</details>

<details>

<summary>Z Max</summary>

**Type**: number

**Documentation**: Sets the upper bound of the color domain. Value should have the same units as in `z` and if set, `zmin` must be set as well.

**Path**: data.index.zmax

</details>

<details>

<summary>Z Mid</summary>

**Type**: number

**Documentation**: Sets the mid-point of the color domain by scaling `zmin` and/or `zmax` to be equidistant to this point. Value should have the same units as in `z`. Has no effect when `zauto` is `false`.

**Path**: data.index.zmid

</details>

<details>

<summary>Z Min</summary>

**Type**: number

**Documentation**: Sets the lower bound of the color domain. Value should have the same units as in `z` and if set, `zmax` must be set as well.

**Path**: data.index.zmin

</details>

<details>

<summary>Z Smooth</summary>

**Default Value**: false

**Type**: enumerated

**Enum Options**: fast,best,false

**Documentation**: Picks a smoothing algorithm use to smooth `z` data.

**Path**: data.index.zsmooth

</details>

***

### Hover Formatting

<details>

<summary>Hover Info</summary>

**Default Value**: all

**Type**: flaglist

**Accept List**: true

**Flag Options**: x,y,z,text,name

**Flag Single**: all,none,skip

**Documentation**: Determines which trace information appear on hover. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired.

**Path**: data.index.hoverinfo

</details>

<details>

<summary>Hover Template</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example "y: %{y}" as well as %{xother}, {%*xother}, {%xother}, {%xother*}. When showing info for several points, *xother* will be added to those with different x positions from the first point. An underscore before or after *(x|y)other* will add a space on that side, only when this field is shown. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". <https://github.com/d3/d3-format/tree/v1.4.5#d3-format> for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". <https://github.com/d3/d3-time-format/tree/v2.2.3#locale\\_format> for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link <https://plotly.com/javascript/plotlyjs-events/#event-data>. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Anything contained in tag `<extra>` is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag `<extra></extra>`.

**Path**: data.index.hovertemplate

</details>

***

### Basic Options

<details>

<summary>Name</summary>

**Type**: string

**Documentation**: Sets the trace name. The trace name appears as the legend item and on hover.

**Path**: data.index.name

</details>

<details>

<summary>Opacity</summary>

**Default Value**: 1

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the opacity of the trace.

**Path**: data.index.opacity

</details>

***

### Data Source

<details>

<summary>Text</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the text elements associated with each z value.

**Path**: data.index.text

</details>

<details>

<summary>Transpose</summary>

**Default Value**: false

**Type**: boolean

**Documentation**: Transposes the z data.

**Path**: data.index.transpose

</details>

<details>

<summary>X</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the x coordinates.

**Path**: data.index.x

</details>

<details>

<summary>Y</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the y coordinates.

**Path**: data.index.y

</details>

<details>

<summary>Z</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the z data.

**Path**: data.index.z

</details>

***

### Text Formatting

<details>

<summary>Color</summary>

**Default Value**: auto

**Type**: color

**Path**: data.index.textfont.color

</details>

<details>

<summary>Size</summary>

**Default Value**: auto

**Type**: number

**Min**: 1

**Path**: data.index.textfont.size

</details>

<details>

<summary>Text Template</summary>

**Default Value**:

**Type**: string

**Documentation**: Template string used for rendering the information text that appear on points. Note that this will override `textinfo`. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". <https://github.com/d3/d3-format/tree/v1.4.5#d3-format> for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". <https://github.com/d3/d3-time-format/tree/v2.2.3#locale\\_format> for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Finally, the template string has access to variables `x`, `y`, `z` and `text`.

**Path**: data.index.texttemplate

</details>

***

### Calendar Options

<details>

<summary>X Calendar</summary>

**Default Value**: gregorian

**Type**: enumerated

**Enum Options**: chinese,coptic,discworld,ethiopian,gregorian,hebrew,islamic,jalali,julian,mayan,nanakshahi,nepali,persian,taiwan,thai,ummalqura

**Documentation**: Sets the calendar system to use with `x` date data.

**Path**: data.index.xcalendar

</details>

<details>

<summary>X Period</summary>

**Default Value**: 0

**Type**: any

**Documentation**: Only relevant when the axis `type` is *date*. Sets the period positioning in milliseconds or *M* on the x axis. Special values in the form of *M* could be used to declare the number of months. In this case `n` must be a positive integer.

**Path**: data.index.xperiod

</details>

<details>

<summary>X Period Alignment</summary>

**Default Value**: middle

**Type**: enumerated

**Enum Options**: start,middle,end

**Documentation**: Only relevant when the axis `type` is *date*. Sets the alignment of data points on the x axis.

**Path**: data.index.xperiodalignment

</details>

***

### Exclusive Options

<details>

<summary>X Gap</summary>

**Default Value**: 0

**Type**: number

**Min**: 0

**Documentation**: Sets the horizontal gap (in pixels) between bricks.

**Path**: data.index.xgap

</details>

<details>

<summary>Y Gap</summary>

**Default Value**: 0

**Type**: number

**Min**: 0

**Documentation**: Sets the vertical gap (in pixels) between bricks.

**Path**: data.index.ygap

</details>