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 months
26
var months = chart.months();
27
months.stroke("#0767b1", 2);
28
months.noDataStroke("#dd2c00");
29
months.labels().fontColor("#dd2c00");
30
months.labels().fontWeight(600);
31
months.labels().fontStyle('italic');
32
months.underSpace(20);
33
34
// configure years
35
chart.years().title().fontSize(30);
36
37
// set the chart title
38
chart.title().useHtml(true);
39
chart.title("Calendar Chart: Months<br><br>" +
40
"<span style='font-size:12; font-style:italic'>" +
41
"GitHub Contributions</span>");
42
43
// set the container id
44
chart.container("container");
45
46
// initiate drawing the chart
47
chart.draw();
48
});