react-best-heatmap v2.0.0

React Best Heatmap 🚀

Simple and easy to get started.

import React from 'react';
import HeatMap from 'react-best-heatmap';

const values = [
  {
    date: new Date(),
    value: 1,
    valueLabel: 'Custom content...'
  }
];

const App = () => (
  <HeatMap values={values} />
);

export default App;

Props

Check proptypes

{
  startDate: PropTypes.instanceOf(Date).isRequired,
  values: PropTypes.array,
  showWeekDays: PropTypes.array,
  showBlockTooltip: PropTypes.bool,
  showLegendTooltip: PropTypes.bool,
  showMonths: PropTypes.bool,
  locale: PropTypes.string,
  rangeDays: PropTypes.number,
  boxShape: PropTypes.string,
  legend: PropTypes.arrayOf(PropTypes.shape({
    isInRange: PropTypes.func.isRequired, // Example: (value) => value > 3
    color: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
  })),
  contentBeforeLegend: PropTypes.string,
  contentAfterLegend: PropTypes.string,
}

Donate

If you liked, you can donate to support it :)