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
// create a data set
4
var data = anychart.data.set([
5
["Jan", 3.8, 5.5, 6.9],
6
["Feb", 5.5, 7.0, 9.6],
7
["Mar", 9.9, 11.7, 13.3],
8
["Apr", 15.7, 17.6, 19.7],
9
["May", 21.5, 23.3, 25.8],
10
["Jun", 26.3, 28.5, 30.2],
11
["Jul", 29.3, 31.6, 33.5],
12
["Aug", 28.4, 30.6, 32.8],
13
["Sep", 24.4, 26.5, 28.0],
14
["Oct", 18.3, 20.6, 22.4],
15
["Nov", 12.3, 14.4, 16.5],
16
["Dec", 6.6, 8.7, 10.4]
17
]);
18
19
// map the data
20
var seriesData_1 = data.mapAs({x: [0], value: [1]});
21
var seriesData_2 = data.mapAs({x: [0], value: [2]});
22
var seriesData_3 = data.mapAs({x: [0], value: [3]});
23
24
// set the chart type
25
var chart = anychart.line();
26
27
// set the interactivity mode
28
chart.interactivity().hoverMode("single");
29
30
// create the first series (area), set the data and name
31
var series1 = chart.area(seriesData_1);
32
series1.name("Average for 20 Years");
33
34
// configure the visual settings of the first series
35
series1.fill("#04B4AE", 0.3);
36
series1.hoverFill("#04B4AE", 0.5);
37
series1.selectFill("#04B4AE", 0.5);
38
series1.hatchFill("zigzag", "#808080", 1, 15);
39
series1.stroke("#04B4AE");
40
series1.hoverStroke("#04B4AE", 4);
41
series1.selectStroke("#04B4AE", 4);
42
43
// create the second series (line), set the data and name
44
var series2 = chart.line(seriesData_2);
45
series2.name("2016");
46
47
// configure the visual settings of the second series
48
series2.stroke("#04B404");
49
series2.hoverStroke("#04B404", 4);
50
series2.selectStroke("#04B404", 4);
51
52
// create the third series (line), set the data and title
53
var series3 = chart.line(seriesData_3);
54
series3.name("2017 (Forecast)");
55
56
// configure the visual settings of the third series
57
series3.stroke("#AEB404", 1, "10 5", "round");
58
series3.hoverStroke("#AEB404", 4, "10 5", "round");
59
series3.selectStroke("#AEB404", 4, "10 5", "round");
60
61
// turn the legend on
62
chart.legend(true);
63
64
// set the chart title
65
chart.title("Visual Settings");
66
67
// set the titles of the axes
68
var xAxis = chart.xAxis();
69
xAxis.title("Month");
70
var yAxis = chart.yAxis();
71
yAxis.title("Temperature, ?C");
72
73
// set the container id
74
chart.container("container");
75
76
// initiate drawing the chart
77
chart.draw();
78
});