var chart = new CanvasJS.Chart("chartContainer",
    {
        title:{
            text: "title"
        },
        axisX:{
            title: "xxxxxxxxxx",
            labelAngle: 135,
            labelFontSize: 23
        },
        axisY:{
            title:"Number of Services"
        },
        axisY2: {
            title: "Number of Eligible Couple",
            titleFontSize: 25,
        },
        toolTip: {
            enabled: true,
            shared: true    },
        animationEnabled: true,
        legend:{
            horizontalAlign: "center", // left, center ,right
            verticalAlign: "top",  // top, center, bottom
            cursor:"pointer",
            itemclick: function(e) {
                if (typeof (e.dataSeries.visible) ===  "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                }
                else
                {
                    e.dataSeries.visible = true;
                }
                chart.render();
            }
        },
        data: [
            {
                type: "column",
                name: "ANC1",
                showInLegend: "true",
                visible: true,
                dataPoints: [{label:"ROY2",x:0,y:36},{label:"ROY3",x:1,y:36}]
            },
            {
                type: "column",
                name: "ANC2",
                showInLegend: "true",
                visible: true,
                dataPoints: [{label:"ROY2",x:0,y:56},{label:"ROY3",x:1,y:36}]
            }
        ]
    });
chart.render();