React Rechart 커스텀하기

회사에서 프로젝트에 차트를 그려야하는 일이 있어서 rechart라는 라이브러리를 사용해서 구현하게 되었다.

• 설치하기 : npm install recharts
• XAxis, YAxis, Legend, ToolTip, CartesianGrid, Line 컴포넌트의 역할은 각각 아래 그림과 같다.
  

데이터를 토대로 선 그래프를 그려야 해서 LineChart를 이용했다.

• ToolTip Custom하기

  

  import React from 'react';
  import { exmapleData } from './dummyData';
  import { Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
  import styled from 'styled-components';
  
  const Chart = () => {
      return (
          <div>
              <LineChart 
                  width={600} 
                  height={300}
                  data={exmapleData}>
                      <Line type='monotone' dataKey='uv' stroke='red'/>
                      <Line type='monotone' dataKey='pv' stroke='blue'/>
                      <XAxis dataKey='name'/>
                      <Tooltip content={<CustomTooltip/>}/>
                      <YAxis/>
                  </LineChart>
          </div>
      );
  };
  
  const CustomTooltip = ({ active, payload, label }) => {
      return (
          <CustomToolTipContainer>
              <div>{ label }</div>
              { payload.map((e,idx)=>(
                  <div key={idx}>{e.dataKey} : {e.value}</div>
              )) }
          </CustomToolTipContainer>
      );
  }
  
  const CustomToolTipContainer = styled.div`
      background-color: rgba(255,0,0,0.5);
      padding: 10px;
      border-radius: 8px;
  `
  
  export default Chart;

• XAxis, YAxis 커스텀하기

  

const Chart = () => {
    const formatXAxis = ( tickItem ) => `${tickItem.slice(4,6)}임`;
    const formatYAxis = ( tickItem ) => tickItem.toLocaleString();

    return (
        <div>
            <LineChart 
                width={800} 
                height={300}
                data={exmapleData}>
                    <Line type='monotone' dataKey='uv' stroke='red'/>
                    <Line type='monotone' dataKey='pv' stroke='blue'/>
                    <Tooltip content={<CustomTooltip/>}/>
                    <XAxis 
                        dataKey='name' 
                        tickFormatter={formatXAxis}
                        padding={{ left: 50, right: 50 }}/>
                    <YAxis 
                        tickFormatter={formatYAxis}
                        padding={{ left: 50, right: 50 }}
                        style={{ backgroundColor: 'red' }}/>
                </LineChart>
        </div>
    );
};