react-native-heatmap-chart
Getting started
$ npm install react-native-heatmap-chart --save
Example
cd examplenpm installreact-native run-android
Basic Usage
;;; const App = { const click = { console; console; }; 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> ;}; ;
Properties
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. |
Contribution
@Windows87 - Main author