# Heat Map

Heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors.

## Example

![example bar chart](imgs/heatMap_example_1.png)

```js

import React from 'react';
import ReactDom from 'react-dom';
import r3 from 'r3-charts'

// get bar chart component
const BarChart = r3.BarChart;

const HeatMap = r3.HeatMap;

// source data
const data = [
  {name: 'jan', x: 1971, z: -3.5},
  {name: 'jan', x: 1972, z: -14.9},
  ...
  {name: 'dec', x: 2013, z: -1.7},
  {name: 'dec', x: 2014, z: -3.9}
];
const color = [
  {color: '#0000ff', value: -30},
  {color: '#135ba9', value: -20},
  {color: '#98cced', value: 0},
  {color: '#eba39f', value: 0.0001},
  {color: '#e74040', value: 17},
  {color: '#e50c0c', value: 22},
  {color: '#e50c0c', value: 27}
];

ReactDOM.render(
  <HeatMap data={data} color={color}/>,
  document.getElementById('app')
);


```

## Properties

Name              | Type          | Default             | Description
---               | ---           | ----                | ---
data *            | array         | -                   | The source data in which each element is an object, like:  `{name: 'jan', x: 1971, z: -3.5}`
color *           | array         | -                   | The color-value map. More about [colorScale](../Others/colorScale.md)
background        | string        | `#eee`              | The chart background color
margin            | number        | `0`                 | The margin of squares
chartClassName    | string        | `r3-heat-map`       | The class name of chart
padding           | object        | `{bottom: 15,left: 20,right: 115,top: 40}` | The sizes of whitespace inside the svg container
size              | number        | `14`                | The side of square
xAxis             | object        | [XAxisOptionsDefault](../Components/XAxis.md) | X-axis options object. [XAxisOptions](../Components/XAxis.md)
xAxis.className   | string        | `r3-heat-map-xaxis` | The class name of chart x-axis 
yAxis             | object        | [YAxisOptionsDefault](../Components/YAxis.md) | Y-axis options object. [YAxisOptions](../Components/YAxis.md)
yAxis.className   | string        | `r3-heat-map-yaxis` | The class name of chart y-axis
yAxis.lineWidth   | string        | `0`                 | The width of y-axis line
yAxis.modTick     | string        | `10`                | The tick values of y-axis will be multiples of powers of it value
yAxis.tickWidth   | string        | `0`                 | The width of y-axis serifs