[javascript] Recharts에서 선 그래프의 색상을 데이터 값에 따라 동적으로 변경하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Recharts에서 선 그래프의 색상을 동적으로 변경하려면 Line 컴포넌트의 stroke prop을 사용해야 합니다. 이 prop을 데이터의 속성 또는 함수로 설정하여 동적인 색상을 지정할 수 있습니다.

데이터의 속성으로 색상을 지정하는 방법은 다음과 같습니다:

import { LineChart, Line } from 'recharts';

const data = [
  { value: 10 },
  { value: 20 },
  { value: 30 },
  // ...
];

<LineChart width={400} height={300} data={data}>
  <Line type="monotone" dataKey="value" stroke="value" />
</LineChart>

위의 예시에서 Line 컴포넌트의 stroke prop에 value라는 데이터의 속성을 전달했습니다. 이 경우, 데이터의 value 값에 따라 선 그래프의 색상이 동적으로 변경됩니다.

데이터의 값에 따라 동적인 색상을 지정하는 방법은 다음과 같습니다:

import { LineChart, Line } from 'recharts';

const data = [
  { value: 10, color: 'red' },
  { value: 20, color: 'blue' },
  { value: 30, color: 'green' },
  // ...
];

<LineChart width={400} height={300} data={data}>
  <Line type="monotone" dataKey="value" stroke={(data) => data.color} />
</LineChart>

위의 예시에서 Line 컴포넌트의 stroke prop에 함수를 전달했습니다. 이 함수는 data 인자를 받아 데이터의 color 속성을 반환합니다. 이렇게 함으로써 데이터의 color 값을 기준으로 선 그래프의 색상이 동적으로 변경됩니다.

위의 예시들을 참고하여 Recharts에서 선 그래프의 색상을 데이터 값에 따라 동적으로 변경하는 방법을 구현해보세요. 만약 추가적인 도움이 필요하다면 Recharts 문서를 참조해보시기 바랍니다.