如何在 YAxis recharts 上突出显示最后一个值

Question

是在重新图表中突出显示 YAxis 上最后一个值的方法类似于 trading view chart

我已经阅读了 YAxis 上的文档，但没有发现任何线索

Answer 1

您可以使用 ReferenceLine 组件的标签属性

import React from "react";
import { LineChart, Line, XAxis, YAxis, ReferenceLine, Label } from "recharts";

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
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100
  }
];
let maxY = Math.max(...data.map((row) => row.pv));

export default function App() {
  return (
    <LineChart
      width={600}
      height={300}
      data={data}
      margin={{ top: 20, right: 80, left: 20, bottom: 5 }}
    >
      <XAxis dataKey="name" />
      <YAxis type="number" />
      <ReferenceLine y={maxY} stroke="red" alwaysShow>
        <Label value={maxY} position="left" fill="red" />
      </ReferenceLine>
      <Line type="monotone" dataKey="pv" stroke="#8884d8" />
    </LineChart>
  );
}

如何在 YAxis recharts 上突出显示最后一个值

How to highlight last value on YAxis recharts

recharts