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", custom_field: "info 1" },
6
{x: "2020-01-15", value: "2", custom_field: "info 2" },
7
{x: "2020-01-18", value: "2", custom_field: "info 3" },
8
{x: "2020-01-19", value: "5", custom_field: "info 4" },
9
{x: "2020-02-03", value: "1", custom_field: "info 5" },
10
{x: "2020-02-19", value: "9", custom_field: "info 6" },
11
{x: "2020-03-19", value: "2", custom_field: "info 7" },
12
{x: "2020-04-13", value: "3", custom_field: "info 8" },
13
{x: "2020-04-15", value: "3", custom_field: "info 9" },
14
{x: "2020-04-20", value: "4", custom_field: "info 10"},
15
{x: "2020-04-21", value: "1", custom_field: "info 11"},
16
{x: "2020-05-10", value: "3", custom_field: "info 12"},
17
{x: "2020-05-11", value: "1", custom_field: "info 13"},
18
{x: "2020-05-14", value: "1", custom_field: "info 14"},
19
{x: "2021-01-12", value: "2", custom_field: "info 15"}
20
];
21
22
// create a chart and set the data
23
var chart = anychart.calendar(data);
24
25
// configure tooltips
26
chart.tooltip().format(function() {
27
var value = this.value;
28
if (value < 4)
29
return "Low (" + value + ")\n\n" +
30
this.getData("custom_field");
31
if (value < 7)
32
return "Medium (" + value + ")\n\n" +
33
this.getData("custom_field");
34
if (value >= 7)
35
return "High (" + value + ")\n\n" +
36
this.getData("custom_field");
37
});
38
39
// configure years
40
chart.years().title().fontSize(30);
41
42
// set the chart title
43
chart.title().useHtml(true);
44
chart.title("Calendar Chart: Tooltips (Formatting Function)<br><br>" +
45
"<span style='font-size:12; font-style:italic'>" +
46
"GitHub Contributions</span>");
47
48
// set the container id
49
chart.container("container");
50
51
// initiate drawing the chart
52
chart.draw();
53
});