D3chart

This is not a great solution, but I'm posting because it is a solution (or a partial one at least).

Without getting into too much detail, I noticed that there were actually two possible causes of the issue (one or both could cause the gaps or bleeding):

1. The lines don't start and/or end at the same x values.
2. The lines don't share a 1 to 1 mapping of x values with actual y values (in other words, at least one of the two lines is "missing" a y value for a corresponding x value that is not missing in the other line).

"Solution"

Note: I've only tested this with curveBasis--other curving types may not work the same way.

1. "Fill in" the missing y values (fixes cause #2 above)--I did this by linear interpolation between closest left/right non-missing points (if the missing value was at the end or beginning of a line, the closest non-missing point value was re-used). Do this in both your normalized and original lines, but don't interpolate between a point in the original line and point that's not in the normalized line--just re-use in this case (see example below).
2. "Triplicate" the normalized start/end points (fixes cause #1 above)--I did this by literally cloning the same point two additional times at the x values where the normalized data starts and ends of the line data. Only need to do this in your original (non-normalized) lines--the normalized lines already start/end where they need to. This works for curveBasis, because of which points are taken into consideration for the curve--this solution essentially forces a sort of line "end" even if it's in the middle of a line (source for documentation quote below):

[curveBasis] Produces a cubic basis spline using the specified control points. The first and last points are triplicated such that the spline starts at the first point and ends at the last point...

Example

Line 1 (x values):

[3, 4, 5, 7, 8, 9, 10, 11] original

[3, 4, 5, 6 (null y), 7, 8, 9, 10, 11] normalized, pre-manipulation

[3, 4, 5, 6 (interpolated y), 7, 8, 9, 10, 11] normalized, post-manipulation

[3, 3, 3, 4, 5, 6 (interpolated y), 7, 8, 9, 10, 11, 11, 11] original, post-manipulation

Note that for line 1, we could skip triplicating the start/end points, since they're already the start/end of the original line

Line 2 (x values):

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 13] original

[3, 4, 5, 6, 7, 8, 9, 10, 11 (null y)] normalized, pre-manipulation

[3, 4, 5, 6, 7, 8, 9, 10, 11 (re-used y from 10)] normalized, post-manipulation

[1, 2, 3, 3, 3, 4, 5, 6, 7, 8, 9, 10, 11 (re-used y from 10), 11 (re-used y from 10), 11 (re-used y from 10), 13] original, post-manipulation (note that we do not interpolate between 10 and 13 to get 11, because 13 doesn't exist in the normalized line)

What does it look like?

Not really that great--but, hey, there are no gaps or bleed overs! The arrows point to where we've "triplicated" points to force the curve to "end" there.

Are we going to use this?

Not likely. I'm still searching for a better solution; but this is what I've come up with so far.

You can try the below solution, change the onclick event inside chart to this.chartRef.current.addEventListener(CLICK, ()=>onClick(this.props.data.length);), the change the onClick props on chart to onClick={this.handleChartClick} and then change the handle chart click to handleChartClick = (data) =>{ console.log('data length on click', data);}

I am not sure of the use case on why you want to the pass the data from Chart component via handleChartClick when it is already available in App class state. You can just use this.state.data.length in handleChartClick

Try commenting out the margins on the chart :

.margin({top: 30, right: 20, bottom: 50, left: 175})

Hope it helps

i think this is what you are after.

(Admittedly there a prettier ways to do this in ES6)

First of all, you can create a dictionary.