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