svelte-heatmap

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

📦 Installation

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>

🚀 Basic usage

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.

⚙️ Options

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

allowOverflow

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

cellGap

Defines the space between cells.

cellRadius

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

cellSize

Defines the size of each cell.

colors

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'].

data

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

dayLabelWidth

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

dayLabels

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

fontColor

Label font color. Defaults to #333.

fontFamily

Label font family. Defaults to sans-serif.

fontSize

Label font size. Defaults to 8.

emptyColor

CSS color to use for cells with no value.

monthGap

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

monthLabelHeight

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

monthLabels

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

startDate

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.

endDate

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.

view

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

📄 License

MIT

Copyright (c) 2017-present, Scott Bedard