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
// set the default types of legend icons
4
anychart.theme({
5
chart: {
6
defaultSeriesSettings: {
7
line: {legendItem: {iconType: "line"}},
8
spline: {legendItem: {iconType: "spline"}},
9
area: {legendItem: {iconType: "area"}}
10
}
11
}
12
});
13
14
// create a data set
15
var data = anychart.data.set([
16
["January", 12000, 10000, 7000, 11000],
17
["February", 15000, 12000, 9000, 13000],
18
["March", 16000, 15000, 14000, 12000],
19
["April", 15000, 11000, 13000, 10000],
20
["May", 10000, 9000, 11000, 6000]
21
]);
22
23
// map the data
24
var seriesData1 = data.mapAs({x: 0, value: 1});
25
var seriesData2 = data.mapAs({x: 0, value: 2});
26
var seriesData3 = data.mapAs({x: 0, value: 3});
27
var seriesData4 = data.mapAs({x: 0, value: 4});
28
29
// create a chart
30
var chart = anychart.line();
31
32
// create series, set the data and names
33
var series1 = chart.line(seriesData1);
34
var series2 = chart.line(seriesData2);
35
var series3 = chart.spline(seriesData3);
36
var series4 = chart.area(seriesData4);
37
series1.name("2015");
38
series2.name("2016");
39
series3.name("2017");
40
series4.name("2018");
41
42
// enable the legend
43
var legend = chart.legend();
44
legend.enabled(true);
45
46
// set the chart title
47
chart.title("Legend: Themes");
48
49
// set the container id
50
chart.container("container");
51
52
// initiate drawing the chart
53
chart.draw();
54
});