twitter bootstrap 3 - How to make Chart JS responsive? -
i using chart.js twitter bootstrap template. charts not sized correctly if don't mention height , width canvas. if specify width , height charts not responsive. how can solve issue?
chart.js has property (responsive) can configure @ global or chart level via options make chart responsive. see http://www.chartjs.org/docs/#getting-started-global-chart-configuration > responsive
// boolean - whether or not chart should responsive , resize when browser does. responsive: true,
true makes responsive. false (default) makes non-responsive.
example usage (only relevant part, check out codepen full exam)
var ctx = $("#bar").get(0).getcontext("2d"); var mychart = new chart(ctx).bar(bardata, { responsive: true });
codepen - http://codepen.io/anon/pen/bdrgvx
you might want check out maintainaspectratio option, if want maintain ratio of width height.
Comments
Post a Comment