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
["January", 12000, 10000, 7000, 11000],
6
["February", 15000, 12000, 9000, 13000],
7
["March", 16000, 15000, 14000, 12000],
8
["April", 15000, 11000, 13000, 10000],
9
["May", 10000, 9000, 11000, 6000]
10
]);
11
12
// map the data
13
var seriesData1 = data.mapAs({x: 0, value: 1});
14
var seriesData2 = data.mapAs({x: 0, value: 2});
15
var seriesData3 = data.mapAs({x: 0, value: 3});
16
var seriesData4 = data.mapAs({x: 0, value: 4});
17
18
// create a chart
19
var chart = anychart.line();
20
21
// create series, set the data and names
22
var series1 = chart.line(seriesData1);
23
var series2 = chart.line(seriesData2);
24
var series3 = chart.line(seriesData3);
25
var series4 = chart.area(seriesData4);
26
series1.name("2015");
27
series2.name("2016");
28
series3.name("2017");
29
series4.name("2018");
30
31
// enable the legend
32
chart.legend(true);
33
34
// add custom legend items
35
chart.legend().items([
36
{
37
text: "1",
38
iconSize: 25,
39
iconFill: "none",
40
iconHatchFill: {type: "backward-diagonal", color: "#96a6a6"},
41
iconStroke: "2 #96a6a6",
42
fontColor: "#96a6a6",
43
fontSize: 16,
44
fontWeight: 600
45
},
46
{
47
text: "2",
48
iconSize: 25,
49
iconFill: "none",
50
iconHatchFill: {type: "forward-diagonal", color: "#96a6a6"},
51
iconStroke: "2 #96a6a6",
52
fontColor: "#96a6a6",
53
fontSize: 16,
54
fontWeight: 600
55
},
56
{
57
text: "3",
58
iconSize: 25,
59
iconFill: "none",
60
iconHatchFill: {type: "diagonal-cross", color: "#96a6a6"},
61
iconStroke: "2 #96a6a6",
62
fontColor: "#96a6a6",
63
fontSize: 16,
64
fontWeight: 600
65
},
66
{
67
text: "4",
68
iconType: "area",
69
iconSize: 25,
70
iconFill: series4.color(),
71
iconStroke: "2 " + series4.color(),
72
fontColor: series4.color(),
73
fontSize: 16,
74
fontWeight: 600
75
},
76
{
77
text: "/ Total: $" + chart.getStat("dataPlotYSum") + " /",
78
iconEnabled: false,
79
fontColor: "#455a64",
80
fontSize: 20,
81
fontWeight: 600,
82
fontStyle: "italic"
83
}
84
]);
85
86
// set the chart title
87
chart.title("Custom Legend Items");
88
89
// set the container id
90
chart.container("container");
91
92
// initiate drawing the chart
93
chart.draw();
94
});