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