Improve this doc View source

# `pfHeatMap`
directive in module `patternfly.charts`

## Description

Directive for rendering a heatmap chart.

## Usage

as attribute

    <ANY pf-heat-map
         data="{object}"
         [chart-data-available="{boolean}"]
         [height="{number}"]
         [chart-title="{string}"]
         [show-legend="{boolean}"]
         [legend-labels="{array}"]
         [max-block-size="{number}"]
         [min-block-size="{number}"]
         [block-padding="{number}"]
         [thresholds="{array}"]
         [heatmap-color-pattern="{array}"]
         [click-action="{function}"]
         [range-hover-size="{number}"]
         [range-on-hover="{boolean}"]
         [range-tooltips="{array}"]>
       ...
    </ANY>

#### Parameters

Param | Type | Details
--- | --- | ---

data

object

data for the chart:

- .id - the id of the measurement
- .value - the value of the measurement
- .tooltip - message to be displayed on hover

chartDataAvailable (optional) | boolean | flag if the chart data is available - default: true
height (optional) | number | height of the chart (no units) - default: 200
chartTitle (optional) | string | title of the chart
showLegend (optional) | boolean | flag to show the legend, defaults to true
legendLabels (optional) | array | the labels for the legend - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']
maxBlockSize (optional) | number | the maximum size for blocks in the heatmap. Default: 50, Range: 5 - 50
minBlockSize (optional) | number | the minimum size for blocks in the heatmap. Default: 2
blockPadding (optional) | number | the padding in pixels between blocks (default: 2)
thresholds (optional) | array | the threshold values for the heapmap - defaults: [0.7, 0.8, 0.9]
heatmapColorPattern (optional) | array | the colors that correspond to the various threshold values (lowest to hightest value ex: <70& to >90%) - defaults: ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000']
clickAction (optional) | function | function(block) function to call when a block is clicked on
rangeHoverSize (optional) | number | the maximum size for highlighting blocks in the same range. Default: 15
rangeOnHover (optional) | boolean | flag to highlight blocks in the same range on hover, defaults to true
rangeTooltips (optional) | array | the tooltips for blocks in the same range - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']

## Example

#### Source

#### Demo