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
var data = getData();
3
4
var chart = anychart.resource();
5
chart.zoomLevel(1);
6
chart.data(data);
7
8
var resourceList = chart.resourceList();
9
10
var images = resourceList.images();
11
images.size(30);
12
13
// Set margin.
14
images.margin(15);
15
16
chart.title('Set margin using single value');
17
chart.container('container');
18
chart.draw();
19
});
20
function getData() {
21
return [
22
{
23
name: 'Vasil Kiryienka',
24
description: 'Rider',
25
'image': 'https://static.anychart.com/images/rider.png',
26
activities: [
27
{
28
name: 'World Championships',
29
start: '2016-10-12',
30
end: '2016-10-12'
31
}
32
]
33
},
34
{
35
name: 'Elia Viviani',
36
description: 'Rider',
37
activities: [
38
{
39
name: 'Paris - Tours',
40
start: '2016-10-09',
41
end: '2016-10-09'
42
},
43
{
44
name: 'World Championships',
45
start: '2016-10-16',
46
end: '2016-10-16'
47
},
48
{
49
name: 'Abu Dhabi Tour',
50
start: '2016-10-20',
51
end: '2016-10-23'
52
}
53
]
54
},
55
{
56
name: 'Ben Swift',
57
description: 'Rider',
58
activities: [
59
{
60
name: 'World Championships',
61
start: '2016-10-09',
62
end: '2016-10-09'
63
},
64
{
65
name: 'World Championships',
66
start: '2016-10-16',
67
end: '2016-10-16'
68
}
69
]
70
},
71
{
72
name: 'Michal Kwiatkowski',
73
description: 'Rider',
74
activities: [
75
{
76
name: 'World Championships',
77
start: '2016-10-09',
78
end: '2016-10-09'
79
},
80
{
81
name: 'Abu Dhabi Tour',
82
start: '2016-10-20',
83
end: '2016-10-23'
84
}
85
]
86
},
87
{
88
name: 'Alex Peters',
89
description: 'Rider',
90
activities: [
91
{
92
name: 'Japan Cup',
93
start: '2016-10-23',
94
end: '2016-10-23'
95
}
96
]
97
},
98
{
99
name: 'Ian Stannard',
100
description: 'Rider',
101
activities: [
102
{
103
name: 'Paris - Tours',
104
start: '2016-10-09',
105
end: '2016-10-09'
106
},
107
{
108
name: 'World Championships',
109
start: '2016-10-16',
110
end: '2016-10-16'
111
}
112
]
113
},
114
{
115
name: 'Lars Petter Nordhaug',
116
description: 'Rider',
117
activities: [
118
{
119
name: 'Paris - Tours',
120
start: '2016-10-09',
121
end: '2016-10-09'
122
},
123
{
124
name: 'Japan Cup',
125
start: '2016-10-23',
126
end: '2016-10-23'
127
}
128
]
129
},
130
{
131
name: 'Nicolas Roche',
132
description: 'Rider',
133
activities: [
134
{
135
name: 'World Championships',
136
start: '2016-10-09',
137
end: '2016-10-09'
138
},
139
{
140
name: 'World Championships',
141
start: '2016-10-12',
142
end: '2016-10-12'
143
},
144
{
145
name: 'Abu Dhabi Tour',
146
start: '2016-10-20',
147
end: '2016-10-23'
148
}
149
]
150
},
151
{
152
name: 'Geraint Thomas',
153
description: 'Rider',
154
activities: [
155
{
156
name: 'World Championships',
157
start: '2016-10-09',
158
end: '2016-10-09'
159
},
160
{
161
name: 'World Championships',
162
start: '2016-10-16',
163
end: '2016-10-16'
164
}
165
]
166
},
167
{
168
name: 'Danny van Poppel',
169
description: 'Rider',
170
activities: [
171
{
172
name: 'World Championships',
173
start: '2016-10-09',
174
end: '2016-10-09'
175
},
176
{
177
name: 'World Championships',
178
start: '2016-10-16',
179
end: '2016-10-16'
180
},
181
{
182
name: 'Abu Dhabi Tour',
183
start: '2016-10-20',
184
end: '2016-10-23'
185
}
186
]
187
},
188
{
189
name: 'David Lopez',
190
description: 'Rider',
191
activities: [
192
{
193
name: 'Japan Cup',
194
start: '2016-10-23',
195
end: '2016-10-23'
196
}
197
]
198
},
199
{
200
name: 'Xabier Zandio',
201
description: 'Rider',
202
activities: [
203
{
204
name: 'Japan Cup',
205
start: '2016-10-23',
206
end: '2016-10-23'
207
}
208
]
209
}
210
];
211
}