VueUiQuickChart added axis labels for line & bar charts

Author: graphieros

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.1.14",
+  "version": "2.1.15",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

src/App.vue

@@ -3331,7 +3331,9 @@ const quickDatasetBar = ref([
 const quickConfig = ref({
   title: 'Some title that can be kinda long',
   xyPeriods: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
-  xyPeriodLabelsRotation: -20
+  xyPeriodLabelsRotation: -20,
+  xAxisLabel: 'This is x axis',
+  yAxisLabel: 'This is y axis'
 })
 
 const cursorConfig = ref({

src/components/vue-ui-quick-chart.vue

@@ -1086,6 +1086,53 @@ defineExpose({
                     />
                 </g>
             </template>
+
+            <template v-if="[detector.chartType.LINE, detector.chartType.BAR].includes(chartType)">
+                <g class="axis-labels">
+                    <g v-if="quickConfig.xAxisLabel && chartType === detector.chartType.LINE">
+                        <text 
+                            :font-size="quickConfig.axisLabelsFontSize"
+                            :fill="quickConfig.color" 
+                            text-anchor="middle"
+                            :x="line.drawingArea.left + (line.drawingArea.width / 2)"
+                            :y="defaultSizes.line.height - (quickConfig.axisLabelsFontSize / 3)"
+                        >
+                            {{ quickConfig.xAxisLabel }}
+                        </text>
+                    </g>
+                    <g v-if="quickConfig.xAxisLabel && chartType === detector.chartType.BAR">
+                        <text 
+                            :font-size="quickConfig.axisLabelsFontSize"
+                            :fill="quickConfig.color" 
+                            text-anchor="middle"
+                            :x="bar.drawingArea.left + (bar.drawingArea.width / 2)"
+                            :y="defaultSizes.bar.height - (quickConfig.axisLabelsFontSize / 3)"
+                        >
+                            {{ quickConfig.xAxisLabel }}
+                        </text>
+                    </g>
+                    <g v-if="quickConfig.yAxisLabel && chartType === detector.chartType.LINE">
+                        <text 
+                            :font-size="quickConfig.axisLabelsFontSize"
+                            :fill="quickConfig.color"
+                            :transform="`translate(${quickConfig.axisLabelsFontSize}, ${line.drawingArea.top + (line.drawingArea.height / 2)}) rotate(-90)`"
+                            text-anchor="middle"
+                        >
+                            {{ quickConfig.yAxisLabel }}
+                        </text>
+                    </g>
+                    <g v-if="quickConfig.yAxisLabel && chartType === detector.chartType.BAR">
+                        <text 
+                            :font-size="quickConfig.axisLabelsFontSize"
+                            :fill="quickConfig.color"
+                            :transform="`translate(${quickConfig.axisLabelsFontSize}, ${bar.drawingArea.top + (bar.drawingArea.height / 2)}) rotate(-90)`"
+                            text-anchor="middle"
+                        >
+                            {{ quickConfig.yAxisLabel }}
+                        </text>
+                    </g>
+                </g>
+            </template>
         </svg>
         <div 
             v-if="quickConfig.showLegend"

src/default_configs.json

@@ -3657,6 +3657,7 @@
         }
     },
     "vue_ui_quick_chart": {
+        "axisLabelsFontSize": 12,
         "backgroundColor":"#FFFFFF",
         "barGap": 12,
         "barStrokeWidth": 1,
@@ -3696,6 +3697,7 @@
         "valuePrefix": "",
         "valueSuffix": "",
         "width": 512,
+        "xAxisLabel": "",
         "xyAxisStroke": "#CCCCCC",
         "xyAxisStrokeWidth": 1,
         "xyGridStroke": "#e1e5e8",
@@ -3704,16 +3706,17 @@
         "xyHighlighterOpacity": 0.05,
         "xyLabelsXFontSize": 8,
         "xyLabelsYFontSize": 12,
-        "xyPaddingBottom": 24,
+        "xyPaddingBottom": 48,
         "xyPaddingLeft": 48,
         "xyPaddingRight": 12,
         "xyPaddingTop": 24,
-        "xyPeriods": [],
         "xyPeriodLabelsRotation": 0,
+        "xyPeriods": [],
         "xyScaleSegments": 10,
         "xyShowAxis": true,
         "xyShowGrid": true,
-        "xyShowScale": true
+        "xyShowScale": true,
+        "yAxisLabel": ""
     },
     "vue_ui_cursor": {
         "bubbleEffect": true,

types/vue-data-ui.d.ts

@@ -4673,6 +4673,7 @@ declare module 'vue-data-ui' {
     }>
 
     export type VueUiQuickChartConfig = {
+        axisLabelsFontSize?: number;
         backgroundColor?: string;
         barGap?: number;
         barStrokeWidth?: number;
@@ -4712,6 +4713,7 @@ declare module 'vue-data-ui' {
         valuePrefix?: string;
         valueSuffix?: string;
         width?: number | null;
+        xAxisLabel?: string;
         xyAxisStroke?: string;
         xyAxisStrokeWidth?: number;
         xyGridStroke?: string;
@@ -4730,6 +4732,7 @@ declare module 'vue-data-ui' {
         xyShowAxis?: boolean;
         xyShowGrid?: boolean;
         xyShowScale?: boolean;
+        yAxisLabel?: string;
     };
 
     export type VueUiQuickChartDatasetObjectItem = {