Heatmap

live example

Explore the API in the live example.

api reference

Heatmap(name[, parent])

The heatmap widget. Being a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

Heatmap.data(plots)

Set/updates the chart data.

Parameters

Name	Type	Description
plots	Object[]	Array of objects representing the density to display. Each object describes a grid with its value: x `number` Horizontal grid index. y `number` Vertical grid index. value `number` Density value in grid point. The data may contains missing grid points. Also, values can be negative. In that case, the color policy should be set to diverging and an appropriate palette should be specified.

Returns

Heatmap

Reference to the Heatmap API.

Examples

const bubbles = dalian.Heatmap('my-chart')
  .data([
    {x: 1, y: 1, value: 2},
    {x: 1, y: 2, value: 3},
    {x: 2, y: 1, value: 5},
    {x: 2, y: 2, value: 1},
  ])
  .render()

Heatmap.grid(grid)

Sets the grid of the heatmap. Initial size is 100x100.

Parameters

Name	Type	Description
grid	number[]	Array containing the horizontal and vertical grid size.

Returns

Heatmap

Reference to the Heatmap API.

Examples

// Create a heatmap with a grid of 30x20.
const heatmap = dalian.Heatmap('my-chart')
  .grid([30, 20])