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 years
26
chart.years().title().fontSize(30);
27
28
// set the chart title
29
chart.title().useHtml(true);
30
chart.title("Calendar Chart: Data<br><br>" +
31
"<span style='font-size:12; font-style:italic'>" +
32
"GitHub Contributions</span>");
33
34
// set the container id
35
chart.container("container");
36
37
// initiate drawing the chart
38
chart.draw();
39
});