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 a dataset
3
let dataSet = anychart.data.set([
4
["Norway", 16, 8, 13],
5
["ROC", 6, 12, 14],
6
["Germany", 12, 10, 5],
7
["Canada", 4, 8, 14],
8
["USA", 8, 10, 7],
9
["Sweden", 8, 5, 5],
10
["Austria", 7, 7, 4],
11
["Japan", 3, 6, 9],
12
["Netherlands", 8, 5, 4],
13
["Italy", 2, 7, 8]
14
]);
15
16
// map the data for the first series
17
let firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });
18
19
// map the data for the second series
20
let secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });
21
22
// map the data for the second series
23
let thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });
24
25
// create a column chart instance
26
let chart = anychart.bar();
27
28
// stack values on y scale.
29
chart.yScale().stackMode("value");
30
31
// a function to configure label, padding, and color settings for all series
32
let setupSeries = function (series, name, color, hoveredColor) {
33
series.name(name).stroke("2 #fff 1").fill(color);
34
series.hovered().stroke("1 #fff 1").fill(hoveredColor);
35
};
36
37
// store series
38
let series;
39
40
// create the first series with the mapped data
41
series = chart.bar(firstSeriesData);
42
setupSeries(series, "Gold", "#f9cd0e", "#dfb80c");
43
44
// create the second series with the mapped data
45
series = chart.bar(secondSeriesData);
46
setupSeries(series, "Silver", "#afb7c0", "#9aa0a6");
47
48
// create the third series with the mapped data
49
series = chart.bar(thirdSeriesData);
50
setupSeries(series, "Bronze", "#cc8469", "#ae7058");
51
52
// turn on the legend
53
chart.legend().enabled(true).fontSize(16).padding([10, 0, 0, 0]);
54
55
// set the union tooltip
56
chart.tooltip().displayMode("union");
57
58
// customize the toolttip
59
chart.tooltip().titleFormat(function(e){
60
return this.x + ' - ' + this.points[0].getStat('categoryYSum');
61
});
62
63
// set the chart title and adjust it
64
chart.title("Beijing 2022 Winter Olympics Medal Tally");
65
chart.title().fontSize(20).fontColor("#2b2b2b").padding([5, 0, 0, 0]);
66
67
// set the container id for the chart
68
chart.container("container");
69
70
// initiate chart drawing
71
chart.draw();
72
});