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
, andendDate
should be JavaScriptDate
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
.
Copyright (c) 2017-present, Scott Bedard