Recharts는 데이터를 차트로 시각화 할 수 있는 라이브러리다
$ npm install recharts
payload={[
{ value: "A", type: "square", color: genieColor },
{ value: "B", type: "square", color: subColor1 },
{ value: "C", type: "square", color: subColor2 },
]}
- 마우스를 가져다대면 해당 지점의 값을 보여준다
- formatter : tooltip의 값과 속성을 지정
<AreaChart width={width} height={height} data={data} margin={margin}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="date"
interval={0}
tickMargin={10}
style={{ fontSize: "13px" }}
height={40}
/>
<YAxis tickCount={10} style={{ fontSize: "13px" }} />
<Area
fillOpacity="1"
type="monotone"
dataKey="streaming"
stroke={color1}
fill={color1}
/>
<Legend
verticalAlign="bottom"
height={1}
margin={{ top: 50, right: 0, left: 0, bottom: 0 }}
iconType="square"
iconSize={12}
/>
<Tooltip />
</AreaChart>
<BarChart data={data} width={width} height={height} margin={margin}>
<CartesianGrid strokeDasharray="3 3" /
<XAxis
interval={0}
tickMargin={10}
style={{ fontSize: "13px" }}
dataKey={getXAxisData}
/>
<YAxis
style={{ fontSize: "13px" }}
/>
<Tooltip />
<Bar stackId="numbers" dataKey="num1" fill="#3597FF" maxBarSize={30}>
<LabelList
position="inside"
dataKey="num1"
style={{ fontSize: "13px" }}
stroke="#3d3d3d"
/>
</Bar>
<Bar stackId="numbers" dataKey="num2" fill="#c2e5ef" maxBarSize={30}>
<LabelList
position="inside"
dataKey="num2"
style={{ fontSize: "13px" }}
stroke="#3d3d3d"
/>
</Bar>
<Bar stackId="numbers" dataKey="num3" fill="#a4de6c" maxBarSize={30}>
<LabelList
position="top"
dataKey="num3"
style={{ fontSize: "13px" }}
stroke="#3d3d3d"
/>
</Bar>
</BarChart>
<PieChart width={width} height={height} margin={margin}>
<Legend
iconType="square"
iconSize={12}
layout="vertical"
verticalAlign="middle"
wrapperStyle={{ marginLeft: "15px" }}
/>
<Pie
data={data}
dataKey="num1"
nameKey="numbers"
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={80}
>
{data &&
Object.values(data).map((d, idx) => (
<Cell key={`cell-${idx}`} fill={colors[idx]} />
))}
<LabelList
position="inside"
dataKey={getNumbers}
stroke="#3d3d3d"
/>
</Pie>
<Tooltip />
</PieChart>
{data &&
Object.values(data).map((d, idx) => (
<Cell key={`cell-${idx}`} fill={colors[idx]} />
))}
<LineChart margin={margin} width={width} height={height} data={data}>
<XAxis dataKey="date" style={{ fontSize: "13px" }} />
<YAxis dataKey="number" style={{ fontSize: "13px" }} />
<Tooltip formatter={(value, name, props) => [value, "number"]} />
<Legend
verticalAlign="bottom"
height={1}
margin={{ top: 50, right: 0, left: 0, bottom: 0 }}
iconType="square"
iconSize={12}
/>
<Line type="linear" dataKey="num1" stroke={color1} dot={false} />
<Line
type="linear"
dataKey="num2"
stroke={color2}
dot={false}
/>
<Line
type="linear"
dataKey="num3"
stroke={color3}
dot={false}
/>
)}
</LineChart>
Recharts 라이브러리를 사용하니 굉장히 편하게 차트를 구현할 수 있었다. 특히 ResponsiveContainer를 통해 반응형으로도 쉽게 구현할 수 있고 Tooltip이나 Legend도 여러 차트에서 동일한 방법으로 쓰이기 때문에 한 번 익혀두면 편해서 차트가 필요할 때 자주 이용할 것 같다