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 data set on our data
3
var dataSet = anychart.data.set([
4
['Powder', 11861, 10919, 8034, 18012],
5
['Mascara', 11261, 10419, 6134, 18712],
6
['Lip gloss', 22998, 12043, 4572, 4008],
7
['Foundation', 10342, 10119, 5231, 13701],
8
['Eyeliner', 12321, 15067, 3417, 5432],
9
['Eyeshadows', 12998, 12043, 4572, 3308],
10
['Pomade', 8814, 9054, 4376, 9256],
11
['Rouge', 11624, 7004, 3574, 5221],
12
['Eyebrow pencil', 13012, 5067, 3987, 3932],
13
['Nail polish', 12814, 3054, 4376, 4229]
14
]);
15
16
// map data for the first series, take x from the zero column and value from the first column of data set
17
var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
18
19
// map data for the second series, take x from the zero column and value from the second column of data set
20
var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
21
22
// map data for the third series, take x from the zero column and value from the third column of data set
23
var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
24
25
// map data for the fourth series, take x from the zero column and value from the fourth column of data set
26
var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4});
27
28
// create bar chart
29
var chart = anychart.bar();
30
31
// turn on chart animation
32
chart.animation(true);
33
34
// set container id for the chart
35
chart.container('container');
36
chart.padding([10, 40, 5, 20]);
37
38
// set scale minimum
39
chart.yScale().minimum(0);
40
41
// force chart to stack values by Y scale.
42
chart.yScale().stackMode('value');
43
44
chart.yAxis().labels().format(function () {
45
return this.value.toLocaleString();
46
});
47
48
// set titles for axises
49
chart.xAxis().title('Products');
50
chart.yAxis().title('Revenue in Dollars');
51
52
// helper function to setup label settings for all series
53
var setupSeriesLabels = function (series, name) {
54
series.name(name);
55
series.tooltip().valuePrefix('$');
56
series.stroke('3 #fff 1');
57
series.hovered().stroke('3 #fff 1');
58
};
59
60
// temp variable to store series instance
61
var series;
62
63
// create first series with mapped data
64
series = chart.bar(seriesData_1);
65
setupSeriesLabels(series, 'Florida');
66
67
// create second series with mapped data
68
series = chart.bar(seriesData_2);
69
setupSeriesLabels(series, 'Texas');
70
71
// create third series with mapped data
72
series = chart.bar(seriesData_3);
73
setupSeriesLabels(series, 'Arizona');
74
75
// create fourth series with mapped data
76
series = chart.bar(seriesData_4);
77
setupSeriesLabels(series, 'Nevada');
78
79
// turn on legend
80
chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
81
chart.interactivity().hoverMode('by-x');
82
chart.tooltip().displayMode('union');
83
// initiate chart drawing
84
chart.draw();
85
});