Skip to main content

Heatmap

The data that describes the heatmap value-to-color mapping is set in z. Data in z can either be multiple grid columns of values (ragged or not) (2D list) or a single grid column of values. In the case where z is a 2D list, say that z has N rows and M columns. Then, by default, the resulting heatmap will have N partitions along the y axis and M partitions along the x axis. In other words, the i-th row/ j-th column cell in z is mapped to the i-th partition of the y axis (starting from the bottom of the chart) and the j-th partition of the x-axis (starting from the left of the chart). Moreover, x (y) can be provided with M or M+1 (N or N+1) elements. If M (N), then the coordinates correspond to the center of the heatmap cells and the cells have equal width. If M+1 (N+1), then the coordinates correspond to the edges of the heatmap cells. In the case where z is a 1D list, the x and y coordinates must be provided in x and y respectively to form data triplets.

Name

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

In the Name text box, the name can be entered and formatted. This is automatically reflected in the Structure > Traces[link] section and in the legend[link] of the chart. The trace name can be also edited directly by double-clicking the trace name in the chart legend.

HTML tags and CSS formatting can be used to enrich text styling.

Trace Opacity

Sets the opacity (transparency) of the trace.

Text

Text

The grid column[link], holding the text to be shown for each item on hover, can be chosen here. Only data-containing columns can be selected.

Colorscale

The data points can be visualized using a number of different color sets, picked from the Colorscales pulldown menu[link].

Colorscale

Explained under Style > General.

Color Bar

  • Show enables the color bar (shown next to the chart), which relates colors in the chart to the numeric data values.
  • Hide disables the color bar.

Orientation

Sets the relation between the numeric data values and the chosen color scale.

  • Normal applies the colors of the Colorscale colors in their original order.
  • Reversed applies the Colorscale colors in reversed order.

Range

  • Auto distributes colors and values linearly within range.
  • Custom allows the range to be distributed across manually-set limits.

Min

Only available when Colorscale > Range is set to Custom.

Sets the lower end of the scale. All data values lower than this number will be mapped onto this value.

Max

Only available when Colorscale > Range is set to Custom.

Sets the upper end of the scale. All data values higher than this number will be mapped onto this value.

Smoothing

  • On When smoothing is turned on, extra menu items Gaps Between Cells and Heatmap are hidden and the chart colors are interpolated, creating a contiuosly changing color field.
  • Off When smoothing is turned off, extra menu items Gaps Between Cells and Heatmap are shown. The chart colors change stepswise.

Gaps In Data

Only available when Colorscale > Smoothing is set to On.

Interpolate Gaps

  • On interpolates missing data points by using available adjacent data. Has the side effect of overruling the Hover On Gaps below.
  • Off shows gaps in data.

Gaps Between Cells

Only available when Colorscale > Smoothing is set to Off.

Horizontal Gap

This setting is linked to Horizontal Gap below. Either setting can be used to change the gap between trace tiles in the horizontal direction.

Vertical Gap

This setting is linked to Vertical Gap below. Either setting can be used to change the gap between trace tiles in the vertical direction.

Heatmap

Only available when Colorscale > Smoothing is set to Off.

Horizontal Gaps

This setting is linked to Horizontal Gap above. Either setting can be used to change the gap between trace tiles in the horizontal direction.

Vertical Gaps

This setting is linked to Vertical Gap above. Either setting can be used to change the gap between trace tiles in the vertical direction.

Hover/Tooltip

Hover On Gaps

  • Yes Gaps in the data will display the categories, the z value is displayed as NaN (Not a Number)

  • No When no data is available, no hover info is shown.

Mode

  • Values will display the values taken from Text above as plain text.

    • Template shows an edit panel for the template string used for rendering the information text. 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}". Dates and times are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".

Show

When under Text >Text[link] a grid area is chosen, Text appears as an extra option in the Show menu. When hovering over the trace, each of the values from the grid are shown for X, Y, Z, a text column and the Name of the trace[link].

Text Alignment

Sets the horizontal alignment of the text content within the hover label box. Has an effect only if the hover label text spans two or more lines. Alignment of Hover/Tooltip can be set to Auto, Left or Right.

Show

When under Text >Text[link] a grid area is chosen, Text appears as an extra option in the Show menu. When hovering over the trace, each of the values from the grid are shown for X, Y, Z, a text column and the Name of the trace[link].

Trace Name

only when Trace name is ticked in Show above

  • Clip To The trace name is partially shown in a side pane attached to the hover pane. Opens extra numerical data field.
  • No Clip An extra side-panel is added to the hover pane, showing the entire trace name.
  • Hide No trace name is shown in the hover info pane.
  • px Numerical field to enter the number of pixels the trace name will be clipped to, only appears when Clip To is selected.

Text Alignment

Sets the horizontal alignment of the text content within the hover label box. Has an effect only if the hover label text spans two or more lines. Alignment of Hover/Tooltip can be set to Auto, Left or Right.

Horizontal Gaps

This setting is linked to Horizontal Gap above. Either setting can be used to change the gap between trace tiles in the horizontal direction.

Vertical Gaps

This setting is linked to Vertical Gap above. Either setting can be used to change the gap between trace tiles in the vertical direction.