HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
var data = [
5
{x: "2020-01-12", value: "6"},
6
{x: "2020-01-15", value: "2"},
7
{x: "2020-01-18", value: "2"},
8
{x: "2020-01-19", value: "5"},
9
{x: "2020-02-03", value: "1"},
10
{x: "2020-02-19", value: "9"},
11
{x: "2020-03-19", value: "2"},
12
{x: "2020-04-13", value: "3"},
13
{x: "2020-04-15", value: "3"},
14
{x: "2020-04-20", value: "4"},
15
{x: "2020-04-21", value: "1"},
16
{x: "2020-05-10", value: "3"},
17
{x: "2020-05-11", value: "1"},
18
{x: "2020-05-14", value: "1"},
19
{x: "2021-01-12", value: "2"}
20
];
21
22
// create a chart and set the data
23
var chart = anychart.calendar(data);
24
25
// configure days
26
var days = chart.days();
27
days.hovered().fill("#b00707");
28
days.normal().stroke("#01579b");
29
days.hovered().stroke("#b00707");
30
days.noDataFill("#f6efef");
31
days.noDataHatchFill(null);
32
days.noDataStroke("#f6efef");
33
days.spacing(4);
34
35
// configure years
36
chart.years().title().fontSize(30);
37
38
// set the chart title
39
chart.title().useHtml(true);
40
chart.title("Calendar Chart: Days<br><br>" +
41
"<span style='font-size:12; font-style:italic'>" +
42
"GitHub Contributions</span>");
43
44
// set the container id
45
chart.container("container");
46
47
// initiate drawing the chart
48
chart.draw();
49
});