Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mehrabt's avatar

date and time chart With Chart js

How can I create a table that shows Dates and times with Chart js?

I can use that with integer times(60, 50, etc.) but when I want to use string times like "12:00" or "08:00" in y, it doesn't work...

this is my code :

<canvas id="myChart"></canvas>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

           <script>

                let examChart = document.getElementById("myChart");
                const dates=[
                    '2022-11-06',
                    '2022-11-07',
                    '2022-11-08',
                ];
  

                let examLineChart = new Chart(myChart, {
                    type: "line",
                    data: {
                        labels:dates,
                        datasets: [{
                            data: [{
                                x: '2022-11-06',
                                y: '02:00'
                            },{
                                x: '2022-11-07',
                                y: '08:00'
                            },{
                                x: '2022-11-08',
                                y: '06:00'
                            },
                            ]
                        }],
                    },
                    options: {
                        label: "placeholder",
                        scales: {
                            x: {
                                type: 'time',
                                time: {
                                    displayFormats: {
                                        quarter: 'MMM YYYY'
                                    }
                                }
                            },
                            y: [{
                                type: 'time',
                                time: {
                                    parser: 'HH:mm',
                                    unit: 'hour',
                                    stepSize: 1,
                                    displayFormats: {
                                        hour: 'HH:mm'
                                    },
                                    tooltipFormat: 'HH:mm'
                                },
                                ticks: {
                                    min: '00:00',
                                    max: '08:00'
                                }
                            }]
                        },
                    }
                });
            </script>
0 likes
0 replies

Please or to participate in this conversation.