Morris Chart is Missing Half Part

Question

I used morris chart in my application project to show some details about quantity of sales.

After executing the AJAX request, the chart is only showing half part. Here's the syntax:

var chartBahan = Morris.Bar ({
    element: 'morris-analytics-bahan',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Quantity Bahan'],
    resize: false,
    gridEnabled: true
}); 

//getting the morris chart over bahan and karakteristik
function getBahanPotensial(kode){
    //ajax call
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateListBahanPotensial",
        data:{
            kode:kode
        },
        success: function(data){
            chartBahan.setData($.parseJSON(data));
            chartBahan.redraw();
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    }); 
}

var chartKarakter = new Morris.Bar ({
    element: 'morris-analytics-karakter',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Karakter Quantity'],
    resize: true
});

function getKarakterPotensial(kode){
    //ajax call
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateListKarakterPotensial",
        data:{
            kode:kode
        },
        success:function(data){
            chartKarakter.setData($.parseJSON(data));
            chartKarakter.redraw();
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    });
}

I execute the above function from another function let say doProcess()

function sendRequest(thecode){
    if(thecode === ""){ alert("Tolong Input Kode Produk");}
    else {
        var kodebarang = thecode;
    }
    //executing AJAX call.                   
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateAnalytics",
        data:{
            kodebarang:kodebarang
        },
        success:function(msg){
            $('#result_analysis').show();
            $('#navigation_button').show();
            new Morris.Bar ({
                element: 'morris-analytics-bar',
                data: $.parseJSON(msg),
                xkey: '1',
                ykeys: ['2', '3'],
                labels: ['Sales Area', 'Tingkat Penjualan'],
                barRatio: 0.4,
                xLabelAngle: 0,
                hideHover: 'auto'
            });

            //execute the morris chart others !! PENTING
            var kodeb = $('#bahan_id').val();
            var kodek = $('#karakteristik_id').val();
            getBahanPotensial(kodeb);
            getKarakterPotensial(kodek);
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    });
}

but the problem is, when i create Morris Chart in Success Callback

success:function(msg){
    $('#result_analysis').show();
    $('#navigation_button').show();
    new Morris.Bar ({
        element: 'morris-analytics-bar',
        data: $.parseJSON(msg),
        xkey: '1',
        ykeys: ['2', '3'],
        labels: ['Sales Area', 'Tingkat Penjualan'],
        barRatio: 0.4,
        xLabelAngle: 0,
        hideHover: 'auto'
    });

The chart is properly showing. Here's the screen shot:

But the other chart when i use template for charting (outside the success callback) the chart is BROKEN

here's the screenshot

then, i have dropdown list to regenerate the chart based on specific parameter, the chart is properly showing (all data show) BUT the chart is only half PAGE. here's the screenshot:

Is there any ideas what going on?

UPDATE

What I mean template is code like this:

var chartBahan = Morris.Bar ({
    element: 'morris-analytics-bahan',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Quantity Bahan'],
    resize: false,
    gridEnabled: true
});

and the method to call the template is

success:function(data){
    chartBahan.setData($.parseJSON(data));
    chartBahan.redraw();
},

The RIGHT chart is the FIRST Screenshot. It's wider than the other two.

UPDATED 2

still getting error on charts created by Morris :(

here's the screenshot.

Answer 1

I solved that issue by setting the width of the svg element to 100% in css

svg{
  width: 100% !important
}