[javascript] Recharts에서 프리셋 스타일을 적용하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Recharts 패키지를 설치해야합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다:

npm install recharts

Recharts를 가져옵니다:

import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

필요한 데이터를 가져옵니다. 예를 들어, 다음과 같은 데이터가 있다고 가정해 봅시다:

const data = [
  { name: 'A', value: 20 },
  { name: 'B', value: 50 },
  { name: 'C', value: 30 },
];

차트를 생성하고 프리셋 스타일을 적용합니다. Recharts에는 여러 프리셋 스타일이 제공됩니다. 예를 들어, ‘vivid’ 프리셋 스타일을 사용하려면 다음과 같이 작성할 수 있습니다:

<AreaChart width={400} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Area type="monotone" dataKey="value" stroke="#8884d8" fill="#8884d8"
  isAnimationActive={false} />
</AreaChart>

차트가 프리셋 스타일을 적용한 모습으로 나타날 것입니다.

Recharts에서 사용할 수있는 다른 프리셋 스타일에 대한 자세한 내용은 Recharts 공식 문서를 참조하십시오.

참조:

Recharts 공식 문서: https://recharts.org/