如何添加自定义 svg 作为重新图表的行/工具提示答案

【问题标题】：How to add a custom svg as the line/tooltip for recharts如何添加自定义 svg 作为重新图表的行/工具提示
【发布时间】：2019-02-07 14:05:17
【问题描述】：

我有一个有两条线的折线图。

对于其中一条线，我想使用自定义 svg 在图表中表示它。见截图。

我该怎么做？

这是我的代码：

<LineChart
   // width={800}
   onClick={() => {}}
   height={300}
   data={this.state.data}
   // margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
 >
   <XAxis dataKey="to_char" />
   <YAxis
      tickFormatter={value => {
      let val = value / 1000000;
           return `$${new Intl.NumberFormat("en").format(val)}m`;
       }}
    />
    <CartesianGrid strokeDasharray="3" vertical={false} />
    <Tooltip />
    <Legend />
    <Line
      dot={false}
      type="monotone"
      dataKey="predictedprice"
      stroke="#1C85E8"
      activeDot={{ r: 8 }}
      name="True Home Estimate™"
      strokeWidth={3}
    />
    <Line
      type="monotone"
      name="Sold Price"
      dataKey="soldprice"
      stroke="#82ca9d"
      shape="star"
     />
</LineChart>

【问题讨论】：

标签： reactjs charts recharts

【解决方案1】：

您应该能够将 shape 属性添加到 ReferenceDot 或 ReferenceArea - 我不确定该形状是否可以正确地用于常规属性，但这是我找到的一个 GitHub 对话链接，其中详细讨论了这一点：

https://github.com/recharts/recharts/issues/922

【讨论】：