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
// create column chart
3
var chart = anychart.column3d();
4
5
// turn on chart animation
6
chart.animation(true);
7
8
// set chart title text settings
9
chart.title('Top 10 Cosmetic Products by Revenue');
10
11
// create area series with passed data
12
chart.column([
13
['1-person', '58'],
14
['2-person', '33'],
15
['3-person', '6'],
16
['4-person', '2'],
17
['5-person or more', '1'],
18
]);
19
20
chart.tooltip()
21
.position('center-top')
22
.anchor('center-bottom')
23
.offsetX(0)
24
.offsetY(5)
25
.format('${%Value}');
26
27
// set scale minimum
28
chart.yScale().minimum(0);
29
30
// set yAxis labels formatter
31
chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
32
33
chart.tooltip().positionMode('point');
34
chart.interactivity().hoverMode('by-x');
35
36
chart.xAxis().title('');
37
chart.yAxis().title('');
38
39
// set container id for the chart
40
chart.container('container');
41
42
// initiate chart drawing
43
chart.draw();
44
});