fix apexcharts bug

See #733

.gitignore

@@ -9,3 +9,4 @@ x.sql
 xbed.sql
 **/sqlpage.bin
 node_modules/
+sqlpage/sqlpage.db

CHANGELOG.md

@@ -27,6 +27,7 @@
 - Fix a bug where the table component would not sort columns that contained a space in their name.
 - Fix a bug where stacked bar charts would not stack the bars correctly in some cases.
 - Update ApexCharts to [v4.1.0](https://github.com/apexcharts/apexcharts.js/releases/tag/v4.1.0).
+- Temporarily disable automatic tick amount calculation in the chart component. This was causing issues with mislabeled x-axis data, because of a bug in ApexCharts.
 
 ## 0.31.0 (2024-11-24)
 

sqlpage/apexcharts.js

@@ -120,11 +120,6 @@ sqlpage_chart = (() => {
 
     let series = Object.values(series_map);
 
-    // tickamount is the number of intervals, not the number of ticks
-    const tickAmount =
-      data.xticks ||
-      Math.min(30, Math.max(...series.map((s) => s.data.length - 1)));
-
     let labels;
     const categories =
       series.length > 0 && typeof series[0].data[0].x === "string";
@@ -182,7 +177,6 @@ sqlpage_chart = (() => {
         },
         min: data.xmin,
         max: data.xmax,
-        tickAmount,
         title: {
           text: data.xtitle || undefined,
         },
@@ -245,6 +239,8 @@ sqlpage_chart = (() => {
       series,
     };
     if (labels) options.labels = labels;
+    // tickamount is the number of intervals, not the number of ticks
+    if (data.xticks) options.xaxis.tickAmount = data.xticks;
     console.log("Rendering chart", options);
     const chart = new ApexCharts(chartContainer, options);
     chart.render();