react chart vs recharts

import React from 'react';
import {Bar} from 'react-chartjs-2';


const options = {
  legend: {
      display: false, // label 숨기기
  },
  scales: {
      yAxes: [{
          ticks: { 
              min: 0, // 스케일에 대한 최솟갓 설정, 0 부터 시작
              stepSize: 2500, // 스케일에 대한 사용자 고정 정의 값
          }
      }]
  },
  maintainAspectRatio: false // false로 설정 시 사용자 정의 크기에 따라 그래프 크기가 결정됨.
}


const Bar2 = () => {

  let calculatedArr = [3500,10000,800,5000]
  // rankArr.forEach(item => calculatedArr[item-1]++)
  let rankColor = [ '#3e517a', '#8ee3f5', '#b08ea2', '#BBB6DF', '#70cad1', '#3e517a',"#a8e0ff"]

  const data = {
    labels: [
      'Page A', 
      'Page B', 
      'Page C', 
      'Page D'
    ],
    datasets: [
      {
        backgroundColor: rankColor,
        borderColor: rankColor,
        borderWidth: 10,
        hoverBackgroundColor: rankColor,
        hoverBorderColor: rankColor,
        data: calculatedArr
      }
    ]
  }; 

  return (
    <Bar 
      data={data}
      width={300}
      height={200}
      options={options}
    />
  );
};

export default Bar2;

##recharts

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import {
    BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,  ResponsiveContainer
} from 'recharts';
import { scaleOrdinal } from 'd3-scale';
import { schemeCategory10 } from 'd3-scale-chromatic';

const colors = scaleOrdinal(schemeCategory10).range();

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
];

const getPath = (x: any, y: any, width: any, height: any) => `M${x},${y + height}
           C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3} ${x + width / 2}, ${y}
           C${x + width / 2},${y + height / 3} ${x + 2 * width / 3},${y + height} ${x + width}, ${y + height}
           Z`;

 const TriangleBar = (props: any) => {
     const {
         fill, x, y, width, height,
     } = props;

     return <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />;
 };

 TriangleBar.propTypes = {
     fill: PropTypes.string,
     x: PropTypes.number,
     y: PropTypes.number,
     width: PropTypes.number,
     height: PropTypes.number,
};

export default class Example extends PureComponent {
    static jsfiddleUrl = 'https://jsfiddle.net/alidingling/rnywhbu8/';

    render() {
        return (
            <BarChart
                width={760}
                height={300}
                data={data}
                margin={{
                    top: 0, right: 0, left: -40, bottom: 0,
                }}
                style={{ 'font-size': 12 }}
            >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Bar dataKey="pv" fill="#dddddd"
                ///"#8884d8"
                > 
                    {/* {
                        data.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={colors[index % 20]} />
                        ))
                    } */}
                </Bar>
            </BarChart>
        );
    }
}