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.normal().fill("#04b4ae", 0.3);
36
series1.hovered().fill("#04b4ae", 0.1);
37
series1.selected().fill("#04b4ae", 0.5);
38
series1.normal().hatchFill("zig-zag", "#808080", 1, 15);
39
series1.hovered().hatchFill("zig-zag", "#808080", 1, 15);
40
series1.selected().hatchFill("zig-zag", "#808080", 1, 15);
41
series1.normal().stroke("#04b4ae");
42
series1.hovered().stroke("#04b4ae", 2);
43
series1.selected().stroke("#04b4ae", 4);
44
45
// create the second series (line), set the data and name
46
var series2 = chart.line(seriesData_2);
47
series2.name("2016");
48
49
// configure the visual settings of the second series
50
series2.normal().stroke("#04b404");
51
series2.hovered().stroke("#04b404", 2);
52
series2.selected().stroke("#04b404", 4);
53
54
// create the third series (line), set the data and title
55
var series3 = chart.line(seriesData_3);
56
series3.name("2017 (Forecast)");
57
58
// configure the visual settings of the third series
59
series3.normal().stroke("#aeb404", 1, "10 5", "round");
60
series3.hovered().stroke("#aeb404", 2, "10 5", "round");
61
series3.selected().stroke("#aeb404", 4, "10 5", "round");
62
63
// turn the legend on
64
chart.legend(true);
65
66
// set the chart title
67
chart.title("Visual Settings");
68
69
// set the titles of the axes
70
chart.xAxis().title("Month");
71
chart.yAxis().title("Temperature, \xb0C");
72
73
// set the container id
74
chart.container("container");
75
76
// initiate drawing the chart
77
chart.draw();
78
});