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
// To change the way how context menu looks you need to change CSS.
3
// By default CSS from AnyChart CDN is used: https://cdn.anychart.com/releases/8.13.0/css/anychart-ui.min.css
4
// Download it, alter, upload to your server and link from your pages to change the look.
5
6
var chart = anychart.surface(getData());
7
8
// Get context menu.
9
var contextMenu = chart.contextMenu();
10
11
contextMenu.itemsFormatter(function (items) {
12
13
items['custom-item'] = {
14
index: 1000,
15
text: 'Custom Context Menu Item',
16
action: actionHandler
17
};
18
19
return items;
20
});
21
22
function actionHandler() {
23
alert('Custom Item Clicked');
24
}
25
26
chart.title('Get and modify context menu. Right-click on the chart');
27
chart.container('container');
28
chart.draw();
29
});
30
31
function getData() {
32
return [
33
[-3, -3, -216],
34
[-3, -2, -125],
35
[-3, -1, -64],
36
[-3, 0, -27],
37
[-3, 1, -8],
38
[-3, 2, -1],
39
[-3, 3, 0],
40
[-2, -3, -125],
41
[-2, -2, -64],
42
[-2, -1, -27],
43
[-2, 0, -8],
44
[-2, 1, -1],
45
[-2, 2, 0],
46
[-2, 3, 1],
47
[-1, -3, -64],
48
[-1, -2, -27],
49
[-1, -1, -8],
50
[-1, 0, -1],
51
[-1, 1, 0],
52
[-1, 2, 1],
53
[-1, 3, 8],
54
[0, -3, -27],
55
[0, -2, -8],
56
[0, -1, -1],
57
[0, 0, 0],
58
[0, 1, 1],
59
[0, 2, 8],
60
[0, 3, 27],
61
[1, -3, -8],
62
[1, -2, -1],
63
[1, -1, 0],
64
[1, 0, 1],
65
[1, 1, 8],
66
[1, 2, 27],
67
[1, 3, 64],
68
[2, -3, -1],
69
[2, -2, 0],
70
[2, -1, 1],
71
[2, 0, 8],
72
[2, 1, 27],
73
[2, 2, 64],
74
[2, 3, 125],
75
[3, -3, 0],
76
[3, -2, 1],
77
[3, -1, 8],
78
[3, 0, 27],
79
[3, 1, 64],
80
[3, 2, 125],
81
[3, 3, 216]
82
]
83
}