[ChartJS / react-chartjs-2] 완벽한 반응형 차트를 구현해보자 #2

기본적인 세팅이 궁금하다면, 앞선 포스팅을 확인하시기 바란다.

🌟 1) 들어가기

 

일단 현재 잡혀있는 options의 내용은 다음과 같으며, 주석으로 각각 옵션에 대한 설명을 작성해 보겠다.

 

const options = {
  responsive: true, // canvas 반응형 여부
  plugins: {
    legend: {
      position: "top" as const, // legend 의 위치
    },
    title: {
      display: true,  // title 보일건지 말건지
      text: "Chart.js / react-chartjs-2 시작하기",
    },
  },
};

 

options안에 responsive를 true 하면, canvas 가 동적으로 반응한다. 반면 responsive를 false로 하게 되면, 고정적 너비를 가지게 된다.

 

작업을 하다 보면, 반응형으로 구현하게 될 상황이 있을 것이다.

그런데..... options 안에 responsive를 true로 주면 다음과 같이 축소는 되는데... 확대는 되지 않는다 🧐

 

 

공식문서에 나온 example로 사용해 봐도 같은 현상이 있다!! 😵

 

🌟  2) responsive를 false로 하고 직접 컨트롤하기

완벽하게 반응형을 구현하기 위해서는 resposive를 false로 두고 상위에서 canvas의 너비를 컨트롤하는 것이 좋을 것 같단 생각이 들었다.

다음과 같이 canvas를 div로 감싸주고, 동일한 비율로 canvas가 반응하게 하기 위하여 vw로 canvas에 값을 줘보자!!

const ChartJs = () => {
  return (
    <Container>
      <Bar options={options} data={data} />
    </Container>
  );
};
export default ChartJs;

const Container = styled.div`
  canvas {
    width: 50vw !important;
    height: 30vw !important;
  }
`;

👿 문제점!!

그러나 이렇게 canvas의 크기를 컨트롤하게 되면... tootip hover 나 클릭 이벤트가 제대로 동작하지 못하고 요소들의 위치를 잡지 못한다..

단순히 외관용으로 잡는 것이라면 위 방법대로, 아니라면 responsive:true를 만들어서 잡아주는 것이 좋다!

 

🌟  3) responsive: true로 조절하기

responsive로 올바르게 동작하게 하려면 코드를 다음과 같이 수정하면 된다.

const ChartJs = () => {
  return (
    <Container>
      <Bar options={options} data={data} />
    </Container>
  );
};
export default ChartJs;

const Container = styled.div`
  width: 50vw;
`;