Menu
sorry if I missed anything to fix my issue, I've read and tried many solutions without any of them being adapted to the problem.
I have several charts (from chart.js) on a single page, but I can't succeed to make them responsive, despite :
responsive: true, The best responsive display I could get was when enlarging canvas width and height, but on the desktop version charts were displayed the entire screen.
Here is a fiddle.net
Anybody to help me ? Thank you very much.
247
Chart. js provides a few options to enable responsiveness and control the resize behavior of charts by detecting when the canvas display size changes and update the render size accordingly.
To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive .
Is it possible to use chart. js for a desktop/mobile application using html that connects through an esp8266 access point or does it need a wifi connection? @marionboynton, CanvasJS is a standalone library that can work offline without any internet connection.
The answer is :
1. add a div around the canvas
for example :
<div class="wrapper"> <canvas width="600" height="250"></canvas> </div> 2. add height to the div class in the css
.wrapper { height: 500px !important; } (adjust height as you wish the responsive rendering)
163
Bootstrap has an example page, which has a chart (using chartjs) that is responsive. So, I would point to that URL, which can be downloaded and we have a responsive chart.
Dasbhoard Example showing Reponsive Chart
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
