CODEWITHSUNDEEP
javascripttwitter-bootstrapbootstrap-modalchartist.js
user3075816
user3075816

Reputation: 169

Chartist.js add graph in a modal

I have a small problem using the library Chartist.js (Link). I'm able to reproduce a graph on the html pages but, when I try tu put in a bootstrap modal, the graph just squeeze to 1 pixel. Example of this can be found here: http://jsfiddle.net/qw2Lnqng/4/. I udnerstood that the problem is due to the fact that the graph doesn't know the available space. The same happens with the tab (Link). The solution with the tab is here: http://jsbin.com/bawofakogu/1/edit?html,js,output. The solution was to add this piece of code:

$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
  e.__chartist__.update();
});
});

I have tried to do the same with the modal but without success. Can you please show me hot wo solve this problem?

Thanks All!

Upvotes: 3

Views: 1442

Answers (1)

Alex
Alex

Reputation: 4669

Ok I found a solution. You can update the chart after the modal begin show; by using this jQuery piece of code :

First of all, store your chart in a variable :

 var yourchart = new Chartist.Line('.ct-chart', {
           labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
           series: [
                  [12, 9, 7, 8, 5],
                  [2, 1, 3.5, 7, 3],
                  [1, 3, 4, 5, 6]
           ]
           }, {
              fullWidth: true,
              chartPadding: {
                  right: 40
              }
});

Then with this code, you'll be able to update your chart to the new size of it's container :

$('#popOverlay').on('shown.bs.modal', function (e) {
     yourchart.update();
});

Upvotes: 9

Related Questions