I'm implementing something from the design team which is involving drawing charts in specific ways.

I'm currently using Recharts to lift the bulk of the work in terms of displaying data. But it integrates directly with D3 in the sense that it accepts D3-driven parameters in most of its components.

Currently, I am trying to mess with the curves of a line graph to achieve the following result:

I've tried several curve types, and the closest I got was with a curveBumpX curve.

  <Line
    key={`bar-${index}`}
    dataKey={key}
    stroke={computedColor}
    type={curveBumpX}  // <-- curveBumpX from d3 package
    dot={false}
    strokeWidth={2}
   />

Although close, the result is not the expected from the design team. Here's what I've got currently:

Is there a way I can tension up the lines at the level change?

Thank you.