Imrpovement - VueUiCandlestick - Added config option to rotate xAxis time labels

Author: graphieros

src/components/vue-ui-candlestick.vue

@@ -552,9 +552,8 @@ defineExpose({
                 <g v-for="(xLabel, i) in xLabels">
                     <text
                         :data-cy="`candlestick-time-label-${i}`"
-                        :x="drawingArea.left + (slot * i) + (slot / 2)"
-                        :y="drawingArea.bottom + candlestickConfig.style.layout.grid.xAxis.dataLabels.fontSize * 2 + candlestickConfig.style.layout.grid.xAxis.dataLabels.offsetY"
-                        text-anchor="middle"
+                        :transform="`translate(${drawingArea.left + (slot * i) + (slot / 2)}, ${drawingArea.bottom + candlestickConfig.style.layout.grid.xAxis.dataLabels.fontSize * 2 + candlestickConfig.style.layout.grid.xAxis.dataLabels.offsetY}), rotate(${candlestickConfig.style.layout.grid.xAxis.dataLabels.rotation})`"
+                        :text-anchor="candlestickConfig.style.layout.grid.xAxis.dataLabels.rotation > 0 ? 'start' : candlestickConfig.style.layout.grid.xAxis.dataLabels.rotation < 0 ? 'end' : 'middle'"
                         :font-size="candlestickConfig.style.layout.grid.xAxis.dataLabels.fontSize"
                         :fill="candlestickConfig.style.layout.grid.xAxis.dataLabels.color"
                         :font-weight="candlestickConfig.style.layout.grid.xAxis.dataLabels.bold ? 'bold': 'normal'"

src/default_configs.json

@@ -2115,7 +2115,8 @@
                             "fontSize": 4,
                             "color":"#2D353C",
                             "offsetY": 0,
-                            "bold": false
+                            "bold": false,
+                            "rotation": 0
                         }
                     },
                     "yAxis": {

types/vue-data-ui.d.ts

@@ -1824,6 +1824,7 @@ declare module 'vue-data-ui' {
                             color?: string;
                             offsetY?: number;
                             bold?: boolean;
+                            rotation?: number;
                         };
                     };
                     yAxis?: {