CODEWITHSUNDEEP
javascripttwitter-bootstrapmorris.js
Renoir Reis
Renoir Reis

Reputation: 358

Chart not obeying width and height attributes

enter image description here

My Morris JS chart is not rendering well inside a bootstrap column, like the documentation tells I gave width and height attributes to the container but the chart is not obeying them.

Does someone have a clue to fix it?

var graficoCampanhaefbe = Morris.Bar({
    element: 'graficoCampanhaefbe',  
    data: [{"nome": "Redes Sociais 1459", "destinatarios": "2", "abertos": "4", "clicados": "2", "capturados": "3"}], 
    barColors: ['#00A5DB','#6EA700','#FFB203','#B50000'],
    xkey: 'nome', 
    ykeys: ['destinatarios','abertos', 'clicados', 'capturados'],
    labels: ['Destinatario','Abertos', 'Clicados', 'Capturados'], 
    hideHover: 'always'
});

When I set resize: true and resize the window the graphic renders just perfect.

enter image description here

Upvotes: 1

Views: 119

Answers (2)

Jeffrey Roosendaal
Jeffrey Roosendaal

Reputation: 7157

You should add class="col-xs-12" to the chart or it's container.

You have not specified a HTML snippet, but it should be the element on which you cast the chart.

Upvotes: 0

krlzlx
krlzlx

Reputation: 5822

In your $(document).ready, try to trigger a window resize after you initialized your Morris Bar and set your resize Morris Bar parameter to true:

$(document).ready(function () {
    var graficoCampanhaefbe = Morris.Bar({...});

    //graficoCampanhaefbe.redraw(); //if needed
    $(window).trigger('resize');
});

Upvotes: 1

Related Questions