Trouble creating a closed line chart in svg

Question

I've got a react component which is creating an svg line chart (I'm not using a library, just creating the svg itself).

Problem is, when I add a final point to the path to return to the starting point, I have a strange 45degree angle showing up at the end of the chart.

Can anybody explain why this is not nicely closed?

Here's an example https://jsfiddle.net/7svavrmu/1/

From what I understand, the final L 0 300 should be returning the path to the origin.

Here's the code

<svg width="300" height="67.40652464075235">
  <path fill="blue" stroke="black" 
d="M 0 40.32613081539207
L 0.15306122448979592 40.990776224724726 
L 0.25510204081632654 41.834373941621585 
L 0.30612244897959184 62.31225269212592 
L 299.0816326530612 45.84534164491692 
L 299.33673469387753 65.256033885832 
L 299.48979591836735 45.314084715607414 
L 300 45.27080004137377 L 0 300 "></path>
</svg>

Answer 1

In SVG paths, each letter is an instruction and the following numbers are the coordinates for that instruction.

Your path ends at a strange location, L 0 300 is the bottom left location but way off the viewport, you need to "draw" the bottom part of your graph by removing the last instruction and adding L 300 67 (bottom right corner) and L 0 67 (bottom left corner). Putting it all together your path needs to look like this:

d="M 0 40.32613081539207
L 0.15306122448979592 40.990776224724726 
L 0.25510204081632654 41.834373941621585 
L 0.30612244897959184 62.31225269212592 
L 299.0816326530612 45.84534164491692 
L 299.33673469387753 65.256033885832 
L 299.48979591836735 45.314084715607414 
L 300 45.27080004137377 L 300 67 L 0 67"