How to interpolate a line with a custom Function type?

[LauGroupie95]

Hi everybody, is there a way to use a custom function to interpolate a line?
I know that I can use a d3-shape Function in the line "type" property as it can be 'basis' | 'basisClosed' | ... | 'stepAfter' | Function. However, looking at the example with the "cardinal" function (https://recharts.org/en-US/examples/CardinalAreaChart) and at the d3-shape link in the documentation (https://d3js.org/d3-shape/curve), I didn't find a way to use a custom function.

Going more in deep, I have a composed chart with two components: a Scatter and a Line. The Scatter has a few points, while the line has to be interpolated with this sigmoid: Y=Bottom + (X^Hillslope)*(Top-Bottom)/(X^HillSlope + EC50^HillSlope) (https://www.graphpad.com/guides/prism/9/curve-fitting/REG_DR_stim_variable_2.htm)

The result would be something like this:

Instead of computing all the line points before with a BE function outside the chart, is there a way to give only the 5 points of the Scatter and to make the chart retrieve the line points following the sigmoid above?

Here's the code of the images I shared. Thank you! :)

const data = [ 
  {  
    et: 0, 
    scatter: 75, 
    line: 75, 
  }, 
  { 
    et: 0.01, 
    line: 74, 
  }, 
  { 
    et: 0.02, 
    line: 73, 
  }, 
  { 
    et: 0.03, 
    line: 72.5, 
  }, 
  { 
    et: 0.04, 
    line: 72, 
  }, 
  { 
    et: 0.05, 
    line: 71.5, 
  }, 
  { 
    et: 0.06, 
    line: 71, 
  }, 
  { 
    et: 0.07, 
    line: 71, 
  }, 
  { 
    et: 0.08, 
    line: 70.5, 
  }, 
  { 
    et: 0.09, 
    line: 70, 
  }, 
  { 
    et: 0.1, 
    scatter: 70, 
    line: 70, 
  }, 
  { 
    et: 0.11, 
    line: 68, 
  }, 
  { 
    et: 0.12, 
    line: 67.5, 
  }, 
  { 
    et: 0.13, 
    line: 67, 
  }, 
  { 
    et: 0.14, 
    line: 67, 
  }, 
  { 
    et: 0.15, 
    line: 66.5, 
  }, 
  { 
    et: 0.16, 
    line: 66, 
  }, 
  { 
    et: 0.17, 
    line: 66, 
  }, 
  { 
    et: 0.18, 
    line: 65.5, 
  }, 
  { 
    et: 0.19, 
    line: 65, 
  }, 
  { 
    et: 0.2, 
    scatter: 65, 
    line: 65, 
  }, 
  { 
    et: 0.21, 
    line: 62, 
  }, 
  { 
    et: 0.22, 
    line: 61, 
  }, 
  { 
    et: 0.23, 
    line: 56, 
  }, 
  { 
    et: 0.24, 
    line: 50, 
  }, 
  { 
    et: 0.25, 
    line: 48, 
  }, 
  { 
    et: 0.26, 
    line: 46, 
  }, 
  { 
    et: 0.27, 
    line: 43, 
  }, 
  { 
    et: 0.28, 
    line: 42.5, 
  }, 
  { 
    et: 0.29, 
    line: 42, 
  }, 
  { 
    et: 0.3, 
    scatter: 42, 
    line: 42, 
  }, 
  { 
    et: 0.31, 
    line: 42, 
  }, 
  { 
    et: 0.32, 
    line: 41.5, 
  }, 
  { 
    et: 0.33, 
    line: 41.5, 
  }, 
  { 
    et: 0.34, 
    line: 41, 
  }, 
  { 
    et: 0.35, 
    line: 40.5, 
  }, 
  { 
    et: 0.36, 
    line: 40, 
  }, 
  { 
    et: 0.37, 
    line: 40, 
  }, 
  { 
    et: 0.38, 
    line: 40, 
  }, 
  { 
    et: 0.39, 
    line: 40, 
  }, 
  { 
    et: 0.4, 
    scatter: 40, 
    line: 40, 
  }, 
]; 

export default function App() { 
  return ( 
    <ResponsiveContainer width={700} height={400}> 
      <ComposedChart data={data}> 
        <CartesianGrid stroke="#CBD4E1" vertical={false} /> 
        <XAxis dataKey="et" ticks={[0, 0.1, 0.2, 0.3, 0.4]} /> 
        <YAxis /> 
        <Tooltip /> 
        <Scatter dataKey="scatter" fill="black" stroke="black" /> 
        <Line 
          type="monotone" 
          dataKey="line" 
          stroke="#1DD9A0" 
          fill="#82ca9d" 
          //dot={false} 
        /> 
      </ComposedChart> 
    </ResponsiveContainer> 
  ); 
} 

[ckifer]

Hi,

Most of the time everything is going to be about your data. I would say its simpler just to pre-compute rather than to rely on something internal to recharts/d3.

But, I think you should be able to do this. I'm not great at math so I'll leave that to you, but

type just expects to return a d3 CurveGenerator. As long as you can do that with the path payload provided in the callback, you should be good to go.

I think this should be able to be accomplished with https://d3js.org/d3-shape/curve#custom-curves

[LauGroupie95]

Hi @ckifer , first of all thanks for the answer!
I agree with you and I think I'll do the "hard work" externally, giving to Recharts simply the points list, but it would be great to see your codesandbox. Unfortunately, I can't open it: can you review the access permission, please?

[ckifer]

Oh weird, looks like it didn't save right. All I was doing was adding a function in the "type" field like so:

type={(path) => { return curveGenerator}}

That's basically where you would do your math and then return a custom curve generator

[LauGroupie95]

Okay, you're right. It's surely more difficult to build the curve this way than computing the points before with a dedicated BE function :')
Thank you a lot!