[React] recharts chart 넓이 100% 설정하는 방법 (+ typescript)

Intro

안녕하세요. 저는 recharts chart  차트 라이브러리를 사용하여 차트의 넓이를 화면 100%에 맞춰서 뿌려주고 싶었는데요. width 값을 100%로 설정하자 다음의 에러가 발생했습니다. 

 

TS2322: Type 'string' is not assignable to type 'number'. 

 

import {NextPage} from "next";
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';


const data = [
    {
        name: 'Jan',
        uv: 4000,
        pv: 2400,
        amt: 2400,
    },
    {
        name: 'Feb',
        uv: 3000,
        pv: 1398,
        amt: 2210,
    },
    {
        name: 'Mar',
        uv: 2000,
        pv: 9800,
        amt: 2290,
    },
  	...
    {
        name: 'Jul',
        uv: 3490,
        pv: 4300,
        amt: 2100,
    },
];
const MainChart: NextPage = () => {
    return (
        <div style={{ width: "100%" }}>
            <LineChart
                width={"100%"}
                height={300}
                data={data}
                margin={{
                    top: 5,
                    right: 30,
                    left: 20,
                    bottom: 5,
                }}
            >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
                <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
            </LineChart>
        </div>

    );
};

 

Why?

LineChart의 width 속성에는 px, em 등 단위를 함께 써주어야 합니다. 때문에  width={"100%"} 처럼 숫자 대신 % 값을 할당할 경우 에러가 발생할 수 있다고 합니다.

 

그래서 두번째 방법으로 아래 stytle 속성을 사용해봤는데요, 아예 표 자체가 화면에 그려지지 않더라고요 ;-;

style={{ width: "100%" }}

 

How to solve the problem

구글링을 통해 아래의 방법을 찾았습니다. ResponsiveContainer 를 이용하여 width를 100%로 설정하니 차트가 예쁘게 그려졌습니다 :) 🤩

<ResponsiveContainer width='100%' aspect={4.0/3.0}>
...
</ResponsiveContainer>