💡 Recharts로 직관적인 데이터 시각화 만들기

프론트엔드 개발을 하다 보면 사용자에게 데이터를 보기 쉽게 시각화해야 하는 상황이 많습니다. 그럴 때 가장 많이 사용하는 오픈소스 차트 라이브러리 중 하나가 바로 Recharts입니다.

이번 글에서는 실전 프로젝트에 적용한 Recharts 활용 사례를 바탕으로 막대그래프(BarChart)와 영역그래프(AreaChart)를 중심으로 커스텀 스타일과 라벨, 도메인 설정 등 자주 쓰이는 기능들을 소개해 보려고 합니다.

---

✅ 기본적인 BarChart 구성

import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';

const data = [
  { name: '9월', value: 250 },
  { name: '10월', value: 212 },
  { name: '11월', value: 350 },
  { name: '12월', value: 420 },
];

<BarChart width={500} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="value" fill="#FFBB3D" />
</BarChart>

🎨 커스텀 스타일 적용 – 마지막 바만 색상 변경

<Bar
  dataKey="value"
  fill="#FFBB3D"
  radius={[4, 4, 0, 0]}
  isAnimationActive={false}
>
  {data.map((entry, index) => (
    <Cell
      key={`cell-${index}`}
      fill={index === data.length - 1 ? '#FFA500' : '#FFBB3D'}
    />
  ))}
</Bar>

마지막 데이터에만 강조된 색을 넣으면 마지막 월의 성과를 강조하는 데 효과적입니다.

📝 라벨 커스터마이징 – 마지막 바에만 값 표시

const renderCustomLabel = ({ x, y, width, value, index }: any) => {
  if (index === data.length - 1) {
    return (
      <text
        x={x + width / 2}
        y={y - 10}
        fill="#FFA500"
        textAnchor="middle"
        fontSize={14}
        fontWeight={600}
      >
        {`${value}만`}
      </text>
    );
  }
  return null;
};

Bar 컴포넌트에 label={renderCustomLabel} 속성을 추가해주면 마지막 바에만 라벨을 표시할 수 있습니다.

📈 AreaChart와 그라데이션 적용

<defs>
  <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
    <stop offset="5%" stopColor="#FFBB3D" stopOpacity={0.8} />
    <stop offset="95%" stopColor="#FFBB3D" stopOpacity={0} />
  </linearGradient>
</defs>

<AreaChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Area
    type="monotone"
    dataKey="pv"
    stroke="#FFBB3D"
    fillOpacity={1}
    fill="url(#colorPv)"
  />
</AreaChart>

그라데이션을 활용하면 시각적으로 더 깊이감 있는 영역 차트를 만들 수 있습니다.

📐 Y축 도메인 및 단위 커스터마이징

const yAxisDomain = ([, dataMax]: [number, number]) => {
  const max = dataMax - (dataMax % 100) + 200;
  return [0, max];
};

<YAxis
  domain={yAxisDomain}
  tickCount={6}
  tickFormatter={(value) => `${value.toLocaleString()}만`}
/>

Tick 수를 고정하고 단위를 포맷하면 사용자에게 더 읽기 쉬운 그래프를 제공할 수 있습니다.

✍️ 마무리하며

Recharts는 간단한 구성으로도 강력한 시각화를 구현할 수 있으며, 커스터마이징을 통해 브랜드 스타일에 맞는 차트를 쉽게 만들 수 있습니다. 실제 프로젝트에서도 사용성과 유지보수 측면에서 큰 만족을 느꼈습니다.

앞으로도 다양한 데이터 시각화가 필요할 때 적극 활용할 예정입니다. 🙌