Github Contribution Graph

display your data visually with a github like contribution graph.

!example of github contribution graph in action

install

``bash
npm i github-contribution-graph
`

or

`bash
yarn add github-contribution-graph
`

usage

`js
import drawContributionGraph from "github-contribution-graph";

// for toottip css
//
// or
// import "github-contribution-graph/src/style.css";

drawContributionGraph({
data,
ssr: false,
config: {
graphMountElement: "#app",
},
});
`

demo

- CSR (Client Side Rendering) demo
- SSR (Server Side Rendering) demo

api

- drawContributionGraph(data, ssr, config)

$3

Type: Object

data to feed the graph, below is an example of the accepted format of the object

`js
const data = {
2023: [
{
done: 12,
not_done: 4, // it's fine if you keep not_done as 0
date: "2023-06-07",
},
{
done: 3,
not_done: 6,
date: "2023-02-25",
},
],
2022: [
{
done: 7,
not_done: 3,
date: "2022-08-01",
},
],
};
`

$3


Type: boolean (defaults to false)

set to true if you want to use this package in server side rendering

$3

Type: object
children types : string or number

#### graphWidth

(defaults to 723)

width of the contribution graph

#### graphHeight

(defaults to 113)

height of the contribution graph

#### graphMountElement

(defaults to body)

the css selector of the element to which the contribution graph to be appended

#### graphTheme

(defaults to standard`)

theme of the graph (check in utils/themes.js for available themes)