anychart.onDocumentReady(function () {
var dataSet = anychart.data.set([
['Nail polish', 12814, 3054, 4376, 4229],
['Eyebrow pencil', 13012, 5067, 3987, 3932],
['Rouge', 11624, 7004, 3574, 5221],
['Pomade', 8814, 9054, 4376, 9256],
['Eyeshadows', 12998, 12043, 4572, 3308],
['Eyeliner', 12321, 15067, 3417, 5432],
['Foundation', 10342, 10119, 5231, 13701],
['Lip gloss', 22998, 12043, 4572, 4008],
['Mascara', 11261, 10419, 6134, 18712]
var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4});
var chart = anychart.area();
chart.yScale().stackMode('percent');
chart.crosshair().enabled(true).yLabel().enabled(false);
chart.crosshair().enabled(true).xLabel().enabled(false);
chart.crosshair().yStroke(null).xStroke('#fff').zIndex(99);
chart.yAxis(0).labels().format("{%Value}%");
var setupSeries = function (series, name) {
series.stroke('3 #fff 1');
series.fill(function () {
return this.sourceColor + ' 0.8'
series.markers().zIndex(100);
.markers().enabled(true).type('circle').size(4).stroke('1.5 #fff');
series = chart.area(seriesData_1);
setupSeries(series, 'USA');
series = chart.area(seriesData_2);
setupSeries(series, 'China');
series = chart.area(seriesData_3);
setupSeries(series, 'EU');
series = chart.area(seriesData_4);
setupSeries(series, 'Africa');
chart.interactivity().hoverMode('by-x');
chart.tooltip().displayMode('union');
chart.legend().enabled(true).fontSize(13).padding([0, 0, 25, 0]);
chart.container('container');