$ npm install react-native-heatmap-chart --save
cd example
npm install
react-native run-androidimport React from 'react';
import { View, ScrollView } from 'react-native';
import HeatMap from 'react-native-heatmap-chart';
const App = () => {
const click = item => {
console.log(`Value: ${item.value}`);
console.log(`Index: ${item.index}`);
};
return (
<ScrollView>
<HeatMap values={[0, 4, 6, 1, 7, 3, 0, 8, 6, 2, 0, 10, 20, 12, 0, 0, 10, 0, 17, 8, 0, 6, 0, 6, 10, 23]} onBlockPress={click} />
</ScrollView>
);
};
export default App;| Prop | Default | Type | Description |
|---|---|---|---|
| numberOfLines | 7 |
number |
Number of Horizontal Lines. |
| values | [] |
array |
Your number values. |
| maximumValue | "relative" |
string |
The maximum value of the heatmap. You can select a number (float or integer) or the string "relative" (default). The relative maximum value will use your own values array to find the maximum value. |
| colors | ['#ebedf0', '#9be9a8', '#30a14e', '#216e39'] |
array |
Colors of HeatMap. |
| colorsPercentage | [0, 0.000001, 41, 60, 80] |
array |
Example: When your value is 60% of maximum, the color will be the index 3 of colors array, 40% will be 2 index, etc. The length of array need to be the same of colors array. |
| blocksSize | 30 |
number |
Size of heatmap blocks (width and height). |
| indexStart | 0 |
number |
Start of values index. |
| onBlockPress | () => {} |
func |
On block press. Return an object with properties { value, index } |
| blocksStyles | {} |
object |
Style of blocks. |
@Windows87 - Main author