A calendar heatmap component built on SVG

January 06, 2019 0 Comments

A calendar heatmap component built on SVG

 

 

A calendar heatmap component built on SVG

A calendar heatmap component built on SVG, inspired by github's commit calendar graph and React Calendar Heatmap, The component expands to size of container and is super configurable.

React-native-Calendar-Heatmap

Installation

Install the npm module:

npm install react-native-calendar-heatmap --save react-native link react-native-svg

Style color is not so fancy and you can change rectColor array to change
color.

Usage

Import the component:

import CalendarHeatmap from 'react-native-calendar-heatmap';

To show a basic heatmap of 100 days ending on April 1st:

<CalendarHeatmap endDate={new Date('2016-04-01')} numDays={100} values={[ { date: '2016-01-01' }, { date: '2016-01-22' }, { date: '2016-01-30' }, // ...and so on ]}
/>

Configuring colors

Still under development, Help me!

GitHub



Tag cloud