@riishabh/react-calender-heatmap

TileChart Component

The TileChart is a React component that displays data in a tile format, where each tile represents a day. The color of the tile indicates the status of that day, which can be "success", "warning", or "alert".

Props

• data: An array of objects, where each object represents a day and has a date and a status. The date is a string in ISO format, and the status can be "success", "warning", or "alert".
• range: The number of months to display. It can be 3, 6, or 12. The default is 6.
• onTileHover: A callback function that is called when a tile is hovered over. It receives the date and status of the hovered tile.
• tileText: A string that is displayed on each tile.

Demo

You can see a live demo of the TileChart component here.

Usage

import { TileChart } from "@riishabh/react-calender-heatmap";


function App() {

const dummydata = [
  { date: "2022-01-01", status: "success" as const },
  { date: "2022-01-02", status: "warning" as const },
  { date: "2022-01-03", status: "alert" as const },
];


return (
     <TileChart data={dummydata} range={6} />
  );
}

export default App;