How to make Chart JS responsive?
Chart.js has a property (responsive) that you can configure at the global or chart level via options that will make the chart responsive. See http://www.chartjs.org/docs/#getting-started-global-chart-configuration > responsive
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
true makes it responsive. false (default) makes it non-responsive.
Example usage (only the relevant part, check out the CodePen for the 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 also want to check out the maintainAspectRatio option, if you want to maintain the ratio of width to height.
Nish
Founder https://thephpcode.com - A CodeIgniter website generator with zero code.
Updated on June 28, 2022Comments
-
Nish almost 2 years
I am using Chart.js with Twitter Bootstrap template. The Charts are not sized correctly if I don't mention a height and width for Canvas. But if I specify width and height then the charts are not responsive. How can I solve this issue?
-
Zim over 7 yearsI think the default is responsive (true)
-
Lukas Hieronimus Adler over 6 yearsFor me it doesn't work. The Charts aren't readable. The resize really really down, so no bars are visible