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
3
// add data
4
var data = [
5
["2003", 1, 0, 0],
6
["2004", 4, 0, 0],
7
["2005", 6, 0, 0],
8
["2006", 9, 1, 0],
9
["2007", 12, 2, 0],
10
["2008", 13, 5, 1],
11
["2009", 15, 6, 1],
12
["2010", 16, 9, 1],
13
["2011", 16, 10, 4],
14
["2012", 17, 11, 5],
15
["2013", 17, 13, 6],
16
["2014", 17, 14, 7],
17
["2015", 17, 14, 10],
18
["2016", 17, 14, 12],
19
["2017", 19, 16, 12],
20
["2018", 20, 17, 14],
21
["2019", 20, 19, 16],
22
["2020", 20, 20, 17],
23
["2021", 20, 20, 20],
24
["2022", 20, 22, 20]
25
];
26
27
// create a data set
28
var dataSet = anychart.data.set(data);
29
30
// map the data for all series
31
var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
32
var secondSeriesData = dataSet.mapAs({x: 0, value: 2});
33
var thirdSeriesData = dataSet.mapAs({x: 0, value: 3});
34
35
// create a line chart
36
var chart = anychart.line();
37
38
// create the series and name them
39
var firstSeries = chart.line(firstSeriesData);
40
firstSeries.name("Roger Federer");
41
var secondSeries = chart.line(secondSeriesData);
42
secondSeries.name("Rafael Nadal");
43
var thirdSeries = chart.line(thirdSeriesData);
44
thirdSeries.name("Novak Djokovic");
45
46
// add a legend
47
chart.legend().enabled(true);
48
49
// add a title
50
chart.title("Big Three's Grand Slam Title Race");
51
52
// name the axes
53
chart.yAxis().title("Titles won");
54
chart.xAxis().title("Year");
55
56
// customize the series markers
57
firstSeries.hovered().markers().enabled(true).type("circle").size(4);
58
secondSeries.hovered().markers().enabled(true).type("circle").size(4);
59
thirdSeries.hovered().markers().enabled(true).type("circle").size(4);
60
61
// turn on crosshairs and remove the y hair
62
chart.crosshair().enabled(true).yStroke(null).yLabel(false);
63
64
// change the tooltip position
65
chart.tooltip().positionMode("point");
66
chart.tooltip().position("right").anchor("left-center").offsetX(5).offsetY(5);
67
68
// specify where to display the chart
69
chart.container("container");
70
71
// draw the resulting chart
72
chart.draw();
73
74
});