A light weight and customizable version of GitHub's contribution graph.

The recommended way to install this package is through NPM.

npm install svelte-heatmap

Alternatively, you may access it via the CDN. When using the CDN, this package will be exposed globally as SvelteHeatmap.

<script src="https://unpkg.com/svelte-heatmap"></script>

To create a heatmap, pass props and a target to the SvelteHeatmap constructor.

import SvelteHeatmap from 'svelte-heatmap';

const heatmap = new SvelteHeatmap({
    props: {
        data: [
            // ...
        ],
    },
    target: '#some-container',
});

To remove the component, call $destroy.

heatmap.$destroy();

See the Svelte documentation for more information.

Note: Date values for data, startDate, and endDate should be JavaScript Date objects objects, or a value compatible with the Date constructor.

Renders cells that fall outside the startDate to endDate range. Defaults to false.

Defines the space between cells.

Defines the radius of each cell. This should be a number relative to the cellSize, or a string representing a percentage such as '50%'.

Defines the size of each cell.

Array of CSS colors to use for the chart, ordered from lowest to highest. Default colors match GitHub's contribution graph with ['#c6e48b', '#7bc96f', '#239a3b', '#196127'].

Array of objects containing the chart data. These objects should be in the shape of { date, value }.

Horizontal space to allocate for day labels. If this is 0, day labels will not be rendered.

Array of strings to use for day labels. Defaults to ['', 'Mon', '', 'Web', '', 'Fri', ''].

Label font color. Defaults to #333.

Label font family. Defaults to sans-serif.

Label font size. Defaults to 8.

CSS color to use for cells with no value.

Defines the space between months when view is set to monthly.

Vertical space to allocate for month labels. If this is 0, month labels will not be rendered.

Array of strings to use for month labels. Defaults to ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].

Date object representing the first day of the graph. If omitted, this will default to the first day of the month or year, based on the current view.

Date object represending the last day of the graph. If omitted, this will default to the last day of the current month or year, depending on the current view.

Determines how the chart should be displayed. Supported values are monthly and yearly, defaults to yearly.

MIT

Copyright (c) 2017-present, Scott Bedard