Unable to use line tension for scatter chart with 'showLine' enabled

Question

I'm trying to chart a time scatter plot using vue-chartjs but am having trouble getting the line tension to work. If I set the tension option for the data set to anything but 0 the line disappears.

The chart data and options (just some dummy data for now):

    const chartOptions = {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
            legend: false
        }
    };

    const chartData = ref({
        datasets: [
            {
                data: [
                    { x: 0, y: 5 },
                    { x: 3, y: 4 },
                    { x: 5, y: 7 },
                    { x: 8, y: 13 },
                    { x: 13, y: 6 },
                    { x: 18, y: 2 },
                    { x: 25, y: 11 },
                ],
                backgroundColor: "#ED1369",
                borderColor: "#ED1369",
                showLine: true,
                tension: 0,
                pointRadius: 3.5,
                pointHoverRadius: 3.5,
                borderWidth: 2
            }
        ]
    });

Result with no tension (tension: 0): Chart showing lines with no tension

Result with tension (tension > 0): Chart breaking and no longer showing lines

I've tried using both "tension" and "lineTension" options, as well as the "cubicInterpolationMode" option. I have also tried various combinations of those options. I have tested and found that Chart.js does support curved lines on scatter plots.

Answer 1

Turns out you have to register the Filler component.

https://github.com/apertureless/vue-chartjs/issues/988