1.0.2 • Published 4 years ago
react-native-heatmap-chart v1.0.2
react-native-heatmap-chart
Getting started
$ npm install react-native-heatmap-chart --save
Example
cd example
npm install
react-native run-androidClick Here
Basic Usage
import 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;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