svelte-heatmap
Demo
https://scottbedard.net/svelte-heatmap
Installation
The preferred way to install this package is through Yarn or NPM.
yarn add svelte-heatmap
npm install --save svelte-heatmap
Alternatively, you can simply reference it from a CDN.
<script src="https://rawgit.com/scottbedard/svelte-heatmap/master/dist/heatmap.js"></script>
<link rel="stylesheet" href="https://rawgit.com/scottbedard/svelte-heatmap/master/dist/heatmap.css">
Basic usage
To use the heatmap, simply instantiate one and mount it to a DOM element.
Note: If you're using this from a CDN, use the global variable SvelteHeatmap
.
import SvelteHeatmap from 'svelte-heatmap';
new SvelteHeatmap({
target: document.querySelector('#target'),
data: {
history: [
{ date: '2000/01/01', value: 5 },
],
tooltip: (date, value) => `${value} contributions on ${date}`,
},
});
Custom colors
To define a set of custom colors, simply provide an array of css colors. The emptyColor
property will be used for days with no value.
new SvelteHeatmap({
target: el,
data: {
colors: ['#c6e48b', '#7bc96f', '#239a3b', '#196127'],
emptyColor: '#dddddd',
history: [],
},
});
Alternatively, you can calculate colors on the fly using the following options. Be aware when doing this, lowColor
and highColor
must be 6 digit hex values (ex: #123456
).
new SvelteHeatmap({
target: el,
data: {
colors: 10,
lowColor: '#aaaaaa',
highColor: '#000000',
emptyColor: '#dddddd',
history: [],
},
});