HTMLcopy
1
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
// create bar chart
3
var chart = anychart.bar();
4
5
chart.animation(true);
6
7
chart.padding([10, 40, 5, 20]);
8
9
chart.title('Top 10 Cosmetic Products by Revenue');
10
11
// create bar series with passed data
12
var series = chart.bar([
13
['Eyeshadows', '249980'],
14
['Eyeliner', '213210'],
15
['Eyebrow pencil', '170670'],
16
['Nail polish', '143760'],
17
['Lipstick', '128000'],
18
['Lip gloss', '110430'],
19
['Mascara', '102610'],
20
['Foundation', '94190'],
21
['Rouge', '80540'],
22
['Powder', '53540']
23
]);
24
25
// set tooltip settings
26
series
27
.tooltip()
28
.position('right')
29
.anchor('left-center')
30
.offsetX(5)
31
.offsetY(0)
32
.titleFormat('{%X}')
33
.format('${%Value}');
34
35
// set yAxis labels formatter
36
chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
37
38
// set titles for axises
39
chart.xAxis().title('Products by Revenue');
40
chart.yAxis().title('Revenue in Dollars');
41
chart.interactivity().hoverMode('by-x');
42
chart.tooltip().positionMode('point');
43
// set scale minimum
44
chart.yScale().minimum(0);
45
46
// set container id for the chart
47
chart.container('container');
48
// initiate chart drawing
49
chart.draw();
50
});