Render 2d Line renderer behind UI Buttons

Hi,
I have a 2d line renderer set up with some ui buttons. The problem is that some parts of my line renderer render over the buttons,
I need this solved ASAP please help!

heres a pic (the red circles show where the problem is):

 

Three (3) primary ways that Unity draws / stacks / sorts / layers / overlays stuff:

https://forum.unity.com/threads/orthographic-camera-rendering-order.1114078/#post-7167037

In short,

1. The default 3D Renderers draw stuff according to Z depth - distance from camera.

2. SpriteRenderers draw according to their Sorting Layer and Sorting Depth properties

3. UI Canvas Renderers draw in linear transform sequence, like a stack of papers

If you find that you need to mix and match items using these different ways of rendering, and have them appear in ways they are not initially designed for, you need to:

- identify what you are using
- search online for the combination of things you are doing and how to to achieve what you want.

There may be more than one solution to try.

Additional reading in the official docs:

https://docs.unity3d.com/Manual/2DSorting.html

And SortingGroups can also be extremely helpful in certain circumstances:

https://docs.unity3d.com/Manual/class-SortingGroup.html