morrisjs donut drawn away from center point

问题:

Chart is drawn from start each time an option is clicked (on-click event). On first couple of times the donut is drawn correctly ie with label at center, but very often donut draws away from the center. Images are shown for both correct and faulty charts. I have hi lighted border of the div to show the position of donut.

This is how it displays in view:

 <div id="donut_div" style="width:425px;height:325px;border:1px solid red;padding:8px;"></div>

Javascript code:

var neg_pts=91, pos_pts =10;
Morris.Donut({
             element: 'donut_div',
             colors: ["#9CC4E4", "#3A89C9"],
             data: [{ label: "- ive Points", value: neg_pts },{ label: "+ ive Points", value: pos_pts }],
             resize: true
            });

 $('#selected-option').on('click', 'a', function () {
    neg_pts=196;
    pos_pts =30;
    $("#donut_div").empty();

    Morris.Donut({ 
             element: 'donut_div',
             colors: ["#9CC4E4", "#3A89C9"],
             data: [{ label: "- ive Points", value: neg_pts },{ label: "+ ive Points", value: pos_pts }],
             resize: true
    });
 });//on-click