Moving Stack Dynamically onClick- CanvasJS

Moving Stack Dynamically onClick

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Click on either Green or Red dataPoint"
    },
    data: [{
        type: "stackedColumn",
        dataPoints: [{
                x: 0,
                y: 111338,
                label: "USA"
            }, {
                x: 1,
                y: 49088,
                label: "SA"
            }

        ]
    }, {
        type: "stackedColumn",
        click: onClick,
        dataPoints: [{
                x: 0,
                y: 135305,
                color: "green"
            }, {
                x: 1,
                y: 10792,
                color: "red"
            }

        ]
    }]
});

chart.render();

function onClick(e) {

    e.dataPoint.x = 1 - e.dataPoint.x;
    chart.render();

}