chart.js 에서 반응형 설정은 아래와 같은데
| options : { responsive : true, } |
[링크 : https://www.chartjs.org/docs/latest/configuration/responsive.html]
정작 이렇게 설정하고 보면 아래와 같이 나오는데
요걸 창 크기 줄여서 작게 만들고
다시 화면을 원래대로 키우면 그래프는 안커진다.
머라머라 써있는데 모르겠고
| Important Note Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size (example ): <div class="chart-container" style="position: relative; height:40vh; width:80vw"> <canvas id="chart"></canvas> </div> Copied! The chart can also be programmatically resized by modifying the container size: chart.canvas.parentNode.style.height = '128px'; chart.canvas.parentNode.style.width = '128px'; Copied! Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false. |
[링크 : https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note]
responsive : true 하고
창의 최소 높이(css min-height)를 지정하면 그정도 까진 사단이 안난다는 의미인 듯.
'Programming > chart.js' 카테고리의 다른 글
| chart.js multi y axis (0) | 2023.09.27 |
|---|---|
| chart.js 특정 항목 보이지 않게 하기(가로줄 치기) (0) | 2023.03.10 |
| chart.js 수직 도움선 (0) | 2023.01.27 |
