график хотя бы рисуется, но при обновлении страницы возникает переполнение стека

static/dev.html

@@ -94,10 +94,12 @@
             <h2>Просмотр логов</h2>
             <button class="action-button" @click="logView()">Обновить <span class="submit-spinner" v-show="submitStatus.logView"></span></button>
             <a href="/dev/logs.csv" class="action-button" download>Скачать</a>
-            <div style="width: 100%;"><canvas id="mainChart"></canvas></div>
         </div>
     </div>
 </div>
+
+<div class="settings-set-container"><h2>График</h2><canvas id="mainChart" style="display: block; box-sizing: border-box;"></canvas></div>
+
 <script src="/js/vue.js?v=3.5.13"></script>
 <script src="/js/chart.js"></script>
 <script src="/js/moment.js"></script>
@@ -181,11 +183,27 @@
                         let logfileContent = await resp.text()
                         const lines = logfileContent.trim().split(/\r\n|\n/)
 
+                        let datasets = []
+
                         // столбец timestamp пропускаем
-                        this.chart.data.labels = lines.shift().split('\t').shift()
+                        let labels = lines.shift().split('\t')
+                        labels.shift()
+                        let rows = lines.map(line => line.split('\t'))
 
-
-                        // this.chartDataset.rows = lines.map(line => line.split('\t'))
+                        for (let li = 0; li < labels.length; li++) {
+                            let td = []
+                            for (let ri = 0; ri < rows.length; ri++) {
+                                td.push({x: new Date(rows[ri][0]), y: rows[ri][li + 1]})
+                            }
+                            datasets.push({
+                                label: labels[li],
+                                data: td,
+                                //borderColor: 'blue',
+                                borderWidth: 2,
+                                fill: false,
+                            })
+                        }
+                        this.chart.datasets = datasets
                         this.chart.update()
                     })
                     .catch((reason) => { alert(`Ошибка при чтении логов: ${reason}`) })
@@ -205,31 +223,39 @@
                 this.updateLoggingStatisticsSettings(vals)
             }
             doFetchSettings().then(() => {})
-            let chart = new Chart(
-                document.getElementById("mainChart"),
-                {
-                    type: 'line',
-                    datasets: [
-                        {
-                            label: 'Net sales',
-                            data: [
-                                {x: new Date('2021-11-06 23:39:30'), y: 50},
-                                {x: new Date('2021-11-07 01:00:28'), y: 60},
-                                {x: new Date('2021-11-07 09:00:28'), y: 20}
-                            ]
-                        }
-                    ],
-                    options: {
-                        scales: {
-                            x: {
-                                type: 'time',
-                            }
+            let chart = new Chart(document.getElementById('mainChart').getContext('2d'), {
+                type: 'line',
+                data: {
+                    datasets: []
+                },
+                options: {
+                    responsive: true,
+                    scales: {
+                        x: {
+                            type: 'time',
+                            title: {
+                                display: true,
+                                text: 'Время',
+                                font: {
+                                    padding: 4,
+                                    size: 20,
+                                    weight: 'bold',
+                                    family: 'Arial'
+                                },
+                                //color: 'darkblue'
+                            },
+                        },
+                        y: {
+                            beginAtZero: true,
+                            type: 'linear',
+                            position: 'left'
                         }
                     }
                 }
-            )
+            })
             this.chart = chart
             document.getElementById("app").removeAttribute("hidden")
+            //this.chart = chart
         }
     });
     app.mount('#app')