Как добавить пользовательский svg в качестве строки / всплывающей подсказки для recharts

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 в ReferenceDot или ReferenceArea - я не уверен, можно ли правильно использовать форму в обычных свойствах, но вот ссылка, которую я нашел на беседу GitHub, в которой больше говорится об этом:

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