[javascript] Recharts에서 특정 데이터 포인트를 강조하는 방법은 무엇인가요?

01 Dec 2023

javascript

import React from 'react';
import { LineChart, Line, ReferenceDot, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
  { name: 'D', value: 25 },
  { name: 'E', value: 18 },
];

const App = () => {
  return (
    <LineChart width={400} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} />
      <ReferenceDot x="C" y={15} r={5} fill="red" />
    </LineChart>
  );
}

export default App;

위 예제에서 ReferenceDot 컴포넌트를 사용하여 x와 y 속성을 지정하면 해당 데이터 포인트에서 원을 그릴 수 있습니다. r 속성은 원의 반지름을 설정하고, fill 속성은 원의 색상을 설정합니다.

더 많은 사용 가능한 Recharts 컴포넌트 및 속성에 대한 자세한 내용은 Recharts 공식 문서를 참조하십시오.