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

Question

我有一条包含两条线的折线图。

对于其中一条线，我想使用自定义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>

Answer 1

您应该能够将shape属性添加到R​​eferenceDot或ReferenceArea-我不确定该形状是否可以正确地用于常规属性，但这是我在GitHub对话中找到的链接，该链接详细讨论了此内容：< / p>

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