<gui-heatmap />

Simple in-memory usage

const el = document.createElement('gui-heatmap');
el.config = {
  table:{
    cols: [
      [4.9, 5.2, 0.6, -3.1, 24.5, -4.3],
      [5.6, 5.3, 2.1, 0.3, 24.9, -4],
      [8.8, 7.6, 6.1, 6.7, 23.1, -0.2],
      [11.4, 9.9, 11.9, 14.8, 19.7, 4.5],
      [15.1, 13.3, 17.1, 20.8, 16.5, 10.8],
      [18.2, 16.5, 22.1, 24.9, 14, 15.2],
      [20.4, 18.7, 24.9, 26.7, 13, 16.4],
      [20.2, 18.5, 24.3, 25.5, 13.5, 15.2],
      [16.9, 15.7, 20.2, 20.8, 14.8, 10.8],
      [12.9, 12, 14.1, 13.7, 17.3, 6.3],
      [8.1, 8, 8.9, 5, 20.3, 0.7],
      [5.4, 5.5, 3.3, -0.9, 22.7, -3.1]
    ]
  },
  colorScale: {
    title: 'Average in °C',
    colors: ['cyan', 'orange', 'red'],
  },
  xAxis: {
    title: 'Month',
    labels: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
    innerPadding: 0.05,
  },
  yAxis: {
    title: 'City',
    labels: ['Paris', 'London', 'New-York', 'Beijing', 'Perth', 'Oslo'],
    innerPadding: 0.05,
  },
};

Config

export type HeatmapConfig = {
  /** @deprecated will be removed in v7 in favor of `el.value` pattern */
  table: TableLikeColumnBased;
  markerColor?: Color;
  /**
   * Displays the value centered in each square. Defaults to `false`.
   */
  displayValue?: boolean;
  tooltip?: HeatmapTooltip;
  xAxis: HeatmapAxis;
  yAxis: HeatmapAxis;
  colorScale?: HeatmapColorScale;
};

export type TableLikeColumnBased = {
  cols?: any[][];
};

export type HeatmapAxis = {
  /** Used in the tooltip */
  title?: string;
  /** */
  labels?: string[];
  /**
   * Sets the inner padding to the specified value which must be in the range [0, 1].
   * The inner padding determines the ratio of the range that is reserved for blank space between bands.
   *
   * The default setting is 0.
   */
  innerPadding?: number;
  /**
   * Sets the outer padding to the specified value which must be in the range [0, 1].
   * The outer padding determines the ratio of the range that is reserved for blank
   * space before the first band and after the last band.
   *
   * The default setting is 0.
   */
  outerPadding?: number;
  hook?: (axis: d3.Axis<string>) => void;
};

export type HeatmapColorScale = {
  /**Used in the tooltip */
  title?: string;
  /** The color range to be used, will be interpolated */
  colors?: string[];
  range?: [number, number];
  type?: 'linear' | 'log';
  format?: string;
};

export type HeatmapTooltip = {
  /**
   * The position of the tooltip.
   *
   * - `'follow'`: follows the mouse cursor
   * - `'in-place'`: replaces the hovered square with the tooltip content
   *
   * Defaults to `'follow'`.
   */
  position?: 'in-place' | 'follow';
  render?: (data: HeatmapData, cursor: Cursor) => void;
};

Layout

The chart will by default take the height and width of its parent container. So make sure to set the height and width of the parent container explicitly.

If you wish to modify any other sizing properties, you can do so by setting the following CSS variables:

gui-heatmap {
  /** The width of the color scale */
  --color-scale-m-right: 40px;

  /** The margins */
  --m-left: 60px;
  --m-right: 60px;
  --m-top: 10px;
  --m-bottom: 25px;

}