Fix - VueUiXy - Fixed positioning issue with axis yLabel & added offsets to yLabel & xLabel

Author: graphieros

src/components/vue-ui-xy.vue

@@ -612,15 +612,23 @@
 
                 <!-- AXIS LABELS -->
                 <g>
-                    <text data-cy="xy-axis-yLabel" v-if="chartConfig.chart.grid.labels.axis.yLabel" :font-size="chartConfig.chart.grid.labels.axis.fontSize" :fill="chartConfig.chart.grid.labels.color" id="yAxisLabel" text-anchor="middle" style="transition: none">
+                    <text 
+                        data-cy="xy-axis-yLabel" 
+                        v-if="chartConfig.chart.grid.labels.axis.yLabel && ! chartConfig.chart.grid.labels.yAxis.useIndividualScale" 
+                        :font-size="chartConfig.chart.grid.labels.axis.fontSize" 
+                        :fill="chartConfig.chart.grid.labels.color"
+                        :transform="`translate(${chartConfig.chart.grid.labels.axis.fontSize + chartConfig.chart.grid.labels.axis.yLabelOffsetX}, ${drawingArea.top + drawingArea.height / 2}) rotate(-90)`"
+                        text-anchor="middle" 
+                        style="transition: none"
+                    >
                         {{ chartConfig.chart.grid.labels.axis.yLabel }}
                     </text>
                     <text 
                         data-cy="xy-axis-xLabel"
                         v-if="chartConfig.chart.grid.labels.axis.xLabel" 
                         text-anchor="middle"
                         :x="chartConfig.chart.width / 2"
-                        :y="drawingArea.bottom + chartConfig.chart.grid.labels.axis.fontSize + chartConfig.chart.grid.labels.xAxisLabels.fontSize * 1.3"
+                        :y="drawingArea.bottom + chartConfig.chart.grid.labels.axis.fontSize + (chartConfig.chart.grid.labels.xAxisLabels.fontSize * 1.3) + chartConfig.chart.grid.labels.axis.xLabelOffsetY"
                         :font-size="chartConfig.chart.grid.labels.axis.fontSize"
                         :fill="chartConfig.chart.grid.labels.color"
                     >
@@ -1498,18 +1506,6 @@ export default {
             })
         }
 
-        const that = this;
-        const yLabel = document.getElementById("yAxisLabel");
-        if(yLabel) {
-            const bboxY = yLabel.getBBox();
-            const xPosition = bboxY.height / 2 + this.chartConfig.chart.padding.left / 5;
-            const yPosition =  this.chartConfig.chart.height / 2;
-            yLabel.setAttributeNS(null, "transform", `rotate(-90, ${xPosition}, ${yPosition})`);
-            yLabel.setAttributeNS(null, "x", xPosition);
-            yLabel.setAttributeNS(null, "y", yPosition);
-            yLabel.setAttributeNS(null, "font-size", this.chartConfig.chart.grid.labels.axis.fontSize);
-        }
-
         if(this.chartConfig.showWarnings) {
             this.dataset.forEach((datapoint) => {
                 datapoint.series.forEach((s, j) => {

src/default_configs.json

@@ -212,7 +212,9 @@
                     "fontSize": 12,
                     "axis": {
                         "yLabel": "",
+                        "yLabelOffsetX": 0,
                         "xLabel": "",
+                        "xLabelOffsetY": 0,
                         "fontSize": 12
                     },
                     "yAxis": {

types/vue-data-ui.d.ts

@@ -2338,7 +2338,9 @@ declare module 'vue-data-ui' {
                     fontSize?: number;
                     axis?: {
                         yLabel?: string;
+                        yLabelOffsetX?: number;
                         xLabel?: string;
+                        xLabelOffsetY?: number;
                         fontSize?: number;
                     };
                     yAxis?: {