react-native-heatmap-chart

Getting started

$ npm install react-native-heatmap-chart --save

Example

cd example
npm install
react-native run-android

Click Here

Basic Usage

importReactfrom'react';import{View,ScrollView}from'react-native';importHeatMapfrom'react-native-heatmap-chart';constApp=()=>{constclick=item=>{console.log(`Value: ${item.value}`);console.log(`Index: ${item.index}`);};return(<ScrollView><HeatMapvalues={[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>);};exportdefaultApp;

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