Chart.js rectangle with lines on same X

Question

I'm trying to draw a mass and balance diagram with Chart.js. Basically it's a rectangle. This is my code so far (as a test):

        const data: any = {
        //labels: ["L1", "L2", "L2+", "L3"],
        datasets: [
            {
                label: "My First dataset",
                backgroundColor: "rgba(255, 99, 132, 0.2)",
                borderColor: "rgba(255, 99, 132, 1)",
                data: [{ x: 10, y: 20 }, { x: 15, y: 30 },{x:15, y:40}, { x: 20, y: 80 }],
                lineTension: 0
            }
        ],


    };
    const options: any = {
    }
    const ctx: CanvasRenderingContext2D = (document.getElementById("massAndBalanceCanvas") as HTMLCanvasElement).getContext("2d");
    const diagram: Chart = new Chart(ctx, {
        type: "line",
        data: data,
        options: options
    });

If I change the chart type from "line" to "scatter", the diagram corners are correctly set but I can't managed to connect the point with lines.

Somebody know how to achieve it?

Thanks!