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.column([
7
{x: 'Meat', value: 10},
8
{x: 'Fruit', value: 12},
9
{x: 'Nuts', value: 18},
10
{x: 'Milk', value: 11},
11
{x: 'Fish', value: 9}
12
]);
13
14
// Get context menu.
15
var contextMenu = chart.contextMenu();
16
17
contextMenu.itemsFormatter(function (items) {
18
19
items['custom-item'] = {
20
index: 1000,
21
text: 'Custom Context Menu Item',
22
action: actionHandler
23
};
24
25
return items;
26
});
27
28
function actionHandler() {
29
alert('Custom Item Clicked');
30
}
31
32
chart.title('Get and modify context menu. Right-click on the chart');
33
chart.container('container');
34
chart.draw();
35
});