How to parse "hh:mm:ss" strings to time in Charts.js 3.x

Question

I want to create a timeline using Charts.js. For this i imported data in the format hours:minutes:seconds like "00:00:10".
When using Charts.js 2.0 one was able to set the parser, which allowed one to import the time values as string.

But after upgrading to Charts.js 3.2.1 the parser option seems to be no longer working.
In the documentation it is stated that one can still use the parser as before. https://www.chartjs.org/docs/latest/axes/cartesian/time.html#parser

I found multiple forum threads that explained how to do this, but they are done in Charts.js 2.x and are no longer working in my example.
Plot lap times with Chart.js from time strings
Chartjs time in Xaxes

Here is my code.
The first example is not going to work because of the script failing with the parser. In the second example you can see the exact same code but without the parser, which is working.

So how can i parse my string data, so that it is formated correctly and the timeline is shown?

Thank you very much for your help.

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
            label: "Switched",
            data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
            showLine: false,
            fill: false,
            tooltip: "Player switched",
            borderColor: "#16a085",
            backgroundColor: "#16a085"
        }
    ]},
    options: {
        responsive: true,
        scales: {
        x: {
                type: 'time',
                time: {
                    parser: 'HH:mm:ss',
                    unit: "seconds",
                    tooltipFormat: 'HH:mm:ss',
                    displayFormats: {
                        'seconds': "HH:mm:ss"
                    },
                    unitStepSize: 30
                }
            },
            y: {
                min: -1,
                max: 13,
                stepSize: 1,
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>

<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
            label: "Switched",
            data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
            showLine: false,
            fill: false,
            tooltip: "Player switched",
            borderColor: "#16a085",
            backgroundColor: "#16a085"
        }
    ]},
    options: {
        responsive: true,
        scales: {
        x: {},
            y: {
                min: -1,
                max: 13,
                stepSize: 1,
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>

<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>

Answer 1

In chart.js v3 they removed moment and the adapter so you will need to add both to your script and it should work

Example:

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
            label: "Switched",
            data: [{x:"00:00:07", y: 0}, {x:"00:00:14", y: 0}, {x:"00:05:24", y: 0}],
            showLine: false,
            fill: false,
            tooltip: "Player switched",
            borderColor: "#16a085",
            backgroundColor: "#16a085"
        }
    ]},
    options: {
        responsive: true,
        scales: {
        x: {
                type: 'time',
                time: {
                    parser: 'HH:mm:ss',
                    unit: "seconds",
                    tooltipFormat: 'HH:mm:ss',
                    displayFormats: {
                        'seconds': "HH:mm:ss"
                    },
                    unitStepSize: 30
                }
            },
            y: {
                min: -1,
                max: 13,
                stepSize: 1,
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<canvas id="chart" height= "80px" style="background-color: rgb(50, 50, 50);"></canvas>