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
['Pomade', 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 area and value from the first area 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 area and value from the second area 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 area and value from the third area 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 area and value from the fourth area of data set
25
var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4});
26
27
// create bar chart
28
var chart = anychart.area();
29
30
// turn on chart animation
31
chart.animation(true);
32
33
// force chart to stack values by Y scale.
34
chart.yScale().stackMode('percent');
35
36
// turn on the crosshair
37
chart.crosshair().enabled(true).yLabel().enabled(false);
38
chart.crosshair().enabled(true).xLabel().enabled(false);
39
chart.crosshair().yStroke(null).xStroke('#fff').zIndex(99);
40
41
// set yAxis labels formatting, force it to add % to values
42
chart.yAxis(0).labels().format("{%Value}%");
43
44
// helper function to setup label settings for all series
45
var setupSeries = function (series, name) {
46
series.stroke('3 #fff 1');
47
series.fill(function () {
48
return this.sourceColor + ' 0.8'
49
});
50
series.name(name);
51
series.markers().zIndex(100);
52
series.clip(false);
53
series.hovered()
54
.stroke('3 #fff 1')
55
.markers().enabled(true).type('circle').size(4).stroke('1.5 #fff');
56
57
};
58
59
// temp variable to store series instance
60
var series;
61
62
// create first series with mapped data
63
series = chart.area(seriesData_1);
64
setupSeries(series, 'USA');
65
66
// create second series with mapped data
67
series = chart.area(seriesData_2);
68
setupSeries(series, 'China');
69
70
// create third series with mapped data
71
series = chart.area(seriesData_3);
72
setupSeries(series, 'EU');
73
74
// create fourth series with mapped data
75
series = chart.area(seriesData_4);
76
setupSeries(series, 'Africa');
77
78
// set interactivity and toolitp settings
79
chart.interactivity().hoverMode('by-x');
80
chart.tooltip().displayMode('union');
81
82
// turn on legend
83
chart.legend().enabled(true).fontSize(13).padding([0, 0, 25, 0]);
84
85
// set container id for the chart
86
chart.container('container');
87
88
// initiate chart drawing
89
chart.draw();
90
});