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
3
// create a column chart
4
var chart = anychart.column();
5
6
// create a data set
7
var dataSet = anychart.data.set([
8
["Virat Kohli", "India", "148", "100", "48"],
9
["Max O'Dowd", "Netherlands", "106", "88", "48"],
10
["Suryakumar Yadav", "India", "81", "104", "54"],
11
["JD Butler", "England", "87", "96", "42"],
12
["Kusal Mendis", "Sri Lanka", "95", "68", "60"],
13
["Sikandar Raza", "Zimbabwe", "89", "64", "66"],
14
["Pathum Nissanka", "Sri Lanka", "114", "52", "48"],
15
["AD Hales", "England", "76", "76", "60"],
16
["Lorkan Tucker", "Ireland", "104", "76", "24"],
17
["Glenn Phillips", "New Zealand", "77", "76", "48"]
18
]);
19
20
// map the data
21
var firstSeriesData = dataSet.mapAs({x: 0, value: 4});
22
var secondSeriesData = dataSet.mapAs({x: 0, value: 3});
23
var thirdSeriesData = dataSet.mapAs({x: 0, value: 2});
24
25
// create the series
26
var series;
27
firstSeries = chart.column(firstSeriesData);
28
secondSeries = chart.column(secondSeriesData);
29
thirdSeries = chart.column(thirdSeriesData);
30
31
// add axis titles
32
chart.xAxis().title("Batsman");
33
chart.yAxis().title("Number of runs");
34
35
// add a chart title
36
chart.title("Top 10 Run Scorers at ICC Men's T20 World Cup 2022");
37
38
// set the container element
39
chart.container("container");
40
41
// display the chart
42
chart.draw();
43
44
});