ChartJs 3.8 Linechart with time

Show time is possible where ChartJs / Luxon handles the gaps in the time

by escay

HTML

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.2/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0"></script>
    
    <style>
    canvas{
      margin-right: auto;
      display: block;
    }
    </style>
    
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

JavaScript

config = {
        "data": {
            "datasets": [
                {
                    "backgroundColor": "rgba(40, 180, 99, 0.3)",
                    "borderColor": "rgb(40, 180, 99)",
                    "borderWidth": 1,
                    "data": [
                        {
                            "x": 1699457269877,
                            "y": 20
                        },
                        {
                            "x": 1700047109694,
                            "y": 20
                        }
                    ],
                    "hidden": false,
                    "label": "Device Id: 524967 Register: A - total Wh ",
                    "minBarLength": 3,
                },
                {
                    "backgroundColor": "rgba(218, 117, 255, 0.3)",
                    "borderColor": "rgb(218, 117, 255)",
                    "borderWidth": 1,
                    "data": [
                        {
                            "x": 1699457267847,
                            "y": 10
                        },
                        {
                            "x": 1700047108397,
                            "y": 234
                        }
                    ],
                    "hidden": false,
                    "label": "Device Id: 524967 Register: A+ total Wh ",
                    "minBarLength": 3,
                }
            ]
        },
        "options": {
            "plugins": {
                "legend": {
                    "display": true,
                    "fullWidth": true,
                    "position": "top",
                    "reverse": false,
                    "rtl": false
                },
                "title": {
                    "display": true,
                    "text": "Values from the meter"
                }
            },
            "scales": {
                "x": {
                    "beginAtZero": false,
                    "offset": true,
                   ...