v2.1.64

Author: graphieros

TestingArena/ArenaVueUiXy.vue

@@ -59,6 +59,9 @@ const model = ref([
 
     { key: 'chart.highlighter.color', def: '#1A1A1A', type: 'color', label: 'highlighterColor', category: 'general' },
     { key: 'chart.highlighter.opacity', def: 5, type: 'range', min: 0, max: 100, label: 'highlighterOpacity', category: 'general' },
+    { key: "chart.highlighter.useLine", def: true, type: "checkbox" },
+
+    { key: "chart.timeTag.show", def: true, type: "checkbox" },
 
     { key: 'chart.highlightArea.show', def: false, type: 'checkbox', label: 'show', category: 'highlight' },
     { key: 'chart.highlightArea.from', def: 0, type: 'number', min: 0, max: 999, label: 'from', category: 'highlight' },
@@ -193,7 +196,38 @@ const config = computed(() => {
             }
         }
     } else {
-        return c
+        return {
+            ...c,
+            chart: {
+                ...c.chart,
+                grid: {
+                    ...c.chart.grid,
+                    labels: {
+                        ...c.chart.grid.labels,
+                        xAxisLabels: {
+                            ...c.chart.grid.labels.xAxisLabels,
+                            values: [
+                                "A",
+                                "B",
+                                "C",
+                                "D",
+                                "E",
+                                "F",
+                                "G",
+                                "H",
+                                "I",
+                                "J",
+                                "K",
+                                "L",
+                                "M",
+                                "N",
+                                "O"
+                            ]
+                        }
+                    }
+                }
+            }
+        }
     }
 });
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.1.63",
+  "version": "2.1.64",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [

src/components/vue-ui-xy.vue

@@ -782,7 +782,7 @@
                         style="overflow: visible !important;"
                     >
                         <div class="vue-ui-xy-time-tag" :style="`width: fit-content;margin: 0 auto;text-align:center;padding:3px 12px;background:${chartConfig.chart.timeTag.backgroundColor};color:${chartConfig.chart.timeTag.color};font-size:${chartConfig.chart.timeTag.fontSize}px`">
-                            {{ chartConfig.chart.grid.labels.xAxisLabels.values[selectedSerieIndex] || selectedSerieIndex }}
+                            {{ timeLabels[selectedSerieIndex] || selectedSerieIndex }}
                         </div>
                     </foreignObject>
                     <circle