react-native-heatmap-chart

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

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