html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // To change the way how context menu looks you need to change CSS.

    // By default CSS from AnyChart CDN is used: https://cdn.anychart.com/css/7.14.3/anychart-ui.css

    // Download it, alter, upload to your server and link from your pages to change the look.

​

    var chart = anychart.line([

        {x: "January", value: 1},

        {x: "February", value: 2},

        {x: "March", value: 1.3},

        {x: "April", value: 2.9}

    ]);

​

    chart.contextMenu().itemsFormatter(function () {

​

        // Adding custom item to the top of context menu.

        this.unshift({

            text: "My custom item 1",

            subMenu: [{

                text: "My custom sub-item 1",

                href: "https://anychart.com"

            }]

        });

​

        // Adding separator after custom item 1.

        this.splice(1, 0, undefined);

​

        // Adding custom item to the bottom of context menu.

        this.push({

            text: "My custom item 2",

            subMenu: [{

                text: "My custom sub-item 2",

                href: "https://anychart.com"

            }]

        });

        return this;

    });

​

    chart.title("Use items formatter to add submenu");

    chart.container("container");

    chart.draw();

});