From f873b98b15e95694cbaf085269fb0626b94ffa9e Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 9 Jul 2025 14:40:47 +0200
Subject: [PATCH 1/8] Internal lib - Add methods to create tspans

---
 src/lib.js        |  23 ++++++-
 tests/lib.test.js | 166 ++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 181 insertions(+), 8 deletions(-)

diff --git a/src/lib.js b/src/lib.js
index c51649f1..5afa2868 100755
--- a/src/lib.js
+++ b/src/lib.js
@@ -1603,6 +1603,25 @@ export function calcTrend(numbers) {
     return averagePercentageChange;
 }
 
+export function createTSpansFromLineBreaksOnX({ content, fontSize, fill, x, y }) {
+    const lines = content.split('\n');
+    return lines
+        .map((line, idx) =>
+            `<tspan x="${x}" y="${y + idx * (fontSize * 1.3)}" fill="${fill}">${line}</tspan>`
+        )
+        .join('');
+}
+
+export function createTSpansFromLineBreaksOnY({ content, fontSize, fill, x }) {
+    const lines = content.split('\n');
+    return lines
+        .map((line, idx) => {
+            const dy = idx === 0 ? 0 : fontSize * 1.3;
+            return `<tspan x="${x}" dy="${dy}" fill="${fill}">${line}</tspan>`;
+        })
+        .join('');
+}
+
 export function createTSpans({
     content,
     fontSize,
@@ -2622,6 +2641,8 @@ const lib = {
     createStar,
     createStraightPath,
     createTSpans,
+    createTSpansFromLineBreaksOnX,
+    createTSpansFromLineBreaksOnY,
     createUid,
     createWordCloudDatasetFromPlainText,
     darkenHexColor,
@@ -2676,6 +2697,6 @@ const lib = {
     createAreaWithCuts,
     createIndividualAreaWithCuts,
     createSmoothAreaSegments,
-    createIndividualArea
+    createIndividualArea,
 };
 export default lib;
\ No newline at end of file
diff --git a/tests/lib.test.js b/tests/lib.test.js
index f1eae3ee..5ab95e18 100644
--- a/tests/lib.test.js
+++ b/tests/lib.test.js
@@ -36,6 +36,8 @@ import {
     createSpiralPath,
     createStar,
     createTSpans,
+    createTSpansFromLineBreaksOnX,
+    createTSpansFromLineBreaksOnY,
     createWordCloudDatasetFromPlainText,
     checkFormatter,
     darkenHexColor,
@@ -3460,11 +3462,11 @@ describe('getCumulativeAverage', () => {
     const valid = [0, 1, 2, 3, 1];
     const invalid = [0, 1, NaN, undefined, null, Infinity, -Infinity, 2, 3, 1];
     test('returns cumulative average for a complete array of numbers', () => {
-        expect(getCumulativeAverage({values: valid})).toEqual([0, 0.5, 1, 1.5, 1.4]);
+        expect(getCumulativeAverage({ values: valid })).toEqual([0, 0.5, 1, 1.5, 1.4]);
     });
 
     test('returns cumulative average and invalid values, but invalid values ignored in average', () => {
-        expect(getCumulativeAverage({values: invalid})).toEqual([0, 0.5, NaN, undefined, null, Infinity, -Infinity, 1 , 1.5, 1.4]);
+        expect(getCumulativeAverage({ values: invalid })).toEqual([0, 0.5, NaN, undefined, null, Infinity, -Infinity, 1, 1.5, 1.4]);
     });
 
     test('returns cumulative average without invalid values', () => {
@@ -3474,7 +3476,7 @@ describe('getCumulativeAverage', () => {
         })).toEqual([0, 0.5, 1, 1.5, 1.4])
     });
 
-    test ('returns cumulative average with zero values replacing invalid values', () => {
+    test('returns cumulative average with zero values replacing invalid values', () => {
         expect(getCumulativeAverage({
             values: invalid,
             config: { convertInvalidToZero: true }
@@ -3486,11 +3488,11 @@ describe('getCumulativeMedian', () => {
     const valid = [0, 1, 2, 3, 1];
     const invalid = [0, 1, NaN, undefined, null, Infinity, -Infinity, 2, 3, 1];
     test('returns cumulative median for a complete array of numbers', () => {
-        expect(getCumulativeMedian({values: valid})).toEqual([0, 0.5, 1, 1.5, 1]);
+        expect(getCumulativeMedian({ values: valid })).toEqual([0, 0.5, 1, 1.5, 1]);
     });
 
     test('returns cumulative median and invalid values, but invalid values ignored in median', () => {
-        expect(getCumulativeMedian({values: invalid})).toEqual([0, 0.5, NaN, undefined, null, Infinity, -Infinity, 1, 1.5, 1]);
+        expect(getCumulativeMedian({ values: invalid })).toEqual([0, 0.5, NaN, undefined, null, Infinity, -Infinity, 1, 1.5, 1]);
     });
 
     test('returns cumulative median without invalid values', () => {
@@ -3500,10 +3502,160 @@ describe('getCumulativeMedian', () => {
         })).toEqual([0, 0.5, 1, 1.5, 1])
     });
 
-    test ('returns cumulative median with zero values replacing invalid values', () => {
+    test('returns cumulative median with zero values replacing invalid values', () => {
         expect(getCumulativeMedian({
             values: invalid,
             config: { convertInvalidToZero: true }
         })).toEqual([0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0])
     })
-});
\ No newline at end of file
+});
+
+describe('createTSpansFromLineBreaksOnX', () => {
+    test('creates a single <tspan> for content without line breaks', () => {
+        const result = createTSpansFromLineBreaksOnX({
+            content: 'Hello World',
+            fontSize: 10,
+            fill: 'red',
+            x: 0,
+            y: 0,
+        });
+        const expected = `<tspan x=\"0\" y=\"0\" fill=\"red\">Hello World</tspan>`;
+        expect(result).toBe(expected);
+    });
+
+    test('creates multiple <tspan> elements split by newline', () => {
+        const result = createTSpansFromLineBreaksOnX({
+            content: 'Line1\nLine2',
+            fontSize: 12,
+            fill: '#00f',
+            x: 5,
+            y: 10,
+        });
+        const lineHeight = 12 * 1.3;
+        const expected = [
+            `<tspan x=\"5\" y=\"10\" fill=\"#00f\">Line1</tspan>`,
+            `<tspan x=\"5\" y=\"${10 + lineHeight}\" fill=\"#00f\">Line2</tspan>`
+        ].join('');
+        expect(result).toBe(expected);
+    });
+
+    test('handles empty content as a single empty <tspan>', () => {
+        const result = createTSpansFromLineBreaksOnX({
+            content: '',
+            fontSize: 8,
+            fill: 'black',
+            x: 1,
+            y: 2,
+        });
+        const expected = `<tspan x=\"1\" y=\"2\" fill=\"black\"></tspan>`;
+        expect(result).toBe(expected);
+    });
+
+    test('handles trailing newline producing an empty <tspan> line', () => {
+        const result = createTSpansFromLineBreaksOnX({
+            content: 'A\nB\n',
+            fontSize: 15,
+            fill: 'green',
+            x: 2,
+            y: 3,
+        });
+        const lineHeight = 15 * 1.3;
+        const expected = [
+            `<tspan x=\"2\" y=\"3\" fill=\"green\">A</tspan>`,
+            `<tspan x=\"2\" y=\"${3 + lineHeight}\" fill=\"green\">B</tspan>`,
+            `<tspan x=\"2\" y=\"${3 + lineHeight * 2}\" fill=\"green\"></tspan>`
+        ].join('');
+        expect(result).toBe(expected);
+    });
+
+    test('handles multiple consecutive newlines correctly', () => {
+        const result = createTSpansFromLineBreaksOnX({
+            content: 'X\n\nY',
+            fontSize: 5,
+            fill: 'blue',
+            x: 0,
+            y: 0,
+        });
+        const lineHeight = 5 * 1.3;
+        const expected = [
+            `<tspan x=\"0\" y=\"0\" fill=\"blue\">X</tspan>`,
+            `<tspan x=\"0\" y=\"${0 + lineHeight}\" fill=\"blue\"></tspan>`,
+            `<tspan x=\"0\" y=\"${0 + lineHeight * 2}\" fill=\"blue\">Y</tspan>`
+        ].join('');
+        expect(result).toBe(expected);
+    });
+})
+
+describe('createTSpansFromLineBreaksOnY', () => {
+    test('single-line content produces one tspan with dy=0', () => {
+        const result = createTSpansFromLineBreaksOnY({
+            content: 'Hello',
+            fontSize: 10,
+            fill: 'red',
+            x: 5,
+        });
+        const expected = `<tspan x=\"5\" dy=\"0\" fill=\"red\">Hello</tspan>`;
+        expect(result).toBe(expected);
+    });
+
+    test('two-line content splits into two tspans with correct dy offsets', () => {
+        const fontSize = 12;
+        const result = createTSpansFromLineBreaksOnY({
+            content: 'Line1\nLine2',
+            fontSize,
+            fill: '#00f',
+            x: 0,
+        });
+        const dy = fontSize * 1.3;
+        const expected = [
+            `<tspan x=\"0\" dy=\"0\" fill=\"#00f\">Line1</tspan>`,
+            `<tspan x=\"0\" dy=\"${dy}\" fill=\"#00f\">Line2</tspan>`,
+        ].join('');
+        expect(result).toBe(expected);
+    });
+
+    test('empty content yields a single empty tspan', () => {
+        const result = createTSpansFromLineBreaksOnY({
+            content: '',
+            fontSize: 8,
+            fill: 'black',
+            x: 2,
+        });
+        const expected = `<tspan x=\"2\" dy=\"0\" fill=\"black\"></tspan>`;
+        expect(result).toBe(expected);
+    });
+
+    test('trailing newline creates an extra empty tspan line', () => {
+        const fontSize = 15;
+        const result = createTSpansFromLineBreaksOnY({
+            content: 'A\nB\n',
+            fontSize,
+            fill: 'green',
+            x: 1,
+        });
+        const dy = fontSize * 1.3;
+        const expected = [
+            `<tspan x=\"1\" dy=\"0\" fill=\"green\">A</tspan>`,
+            `<tspan x=\"1\" dy=\"${dy}\" fill=\"green\">B</tspan>`,
+            `<tspan x=\"1\" dy=\"${dy}\" fill=\"green\"></tspan>`
+        ].join('');
+        expect(result).toBe(expected);
+    });
+
+    test('multiple consecutive newlines produce intermediate empty tspans', () => {
+        const fontSize = 5;
+        const result = createTSpansFromLineBreaksOnY({
+            content: 'X\n\nY',
+            fontSize,
+            fill: 'blue',
+            x: 3,
+        });
+        const dy = fontSize * 1.3;
+        const expected = [
+            `<tspan x=\"3\" dy=\"0\" fill=\"blue\">X</tspan>`,
+            `<tspan x=\"3\" dy=\"${dy}\" fill=\"blue\"></tspan>`,
+            `<tspan x=\"3\" dy=\"${dy}\" fill=\"blue\">Y</tspan>`
+        ].join('');
+        expect(result).toBe(expected);
+    });
+})
\ No newline at end of file

From b7a2466841439cefc114d9d75cb929f1f2484038 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 9 Jul 2025 14:41:44 +0200
Subject: [PATCH 2/8] New feature - Display mutliline labels when they include
 line breaks

---
 TestingArena/ArenaVueUiHistoryPlot.vue        |   2 +-
 .../ArenaVueUiParallelCoordinatePlot.vue      |   2 +-
 TestingArena/ArenaVueUiQuadrant.vue           |   2 +-
 TestingArena/ArenaVueUiQuickChart.vue         |   7 +-
 TestingArena/ArenaVueUiRidgeline.vue          |   7 +-
 TestingArena/ArenaVueUiStackbar.vue           |  11 +-
 TestingArena/ArenaVueUiStripPlot.vue          |   4 +-
 TestingArena/ArenaVueUiTreemap.vue            |   2 +-
 TestingArena/ArenaVueUiVerticalBar.vue        |   2 +-
 TestingArena/ArenaVueUiWaffle.vue             |   6 +-
 TestingArena/ArenaVueUiXy.vue                 |   7 +-
 src/components/vue-ui-donut-evolution.vue     |  42 ++++--
 src/components/vue-ui-history-plot.vue        |  64 ++++++---
 .../vue-ui-parallel-coordinate-plot.vue       |  22 ++++
 src/components/vue-ui-quadrant.vue            |  44 +++++--
 src/components/vue-ui-quick-chart.vue         |  38 ++++--
 src/components/vue-ui-ridgeline.vue           |  29 ++++-
 src/components/vue-ui-stackbar.vue            | 123 +++++++++++++-----
 src/components/vue-ui-strip-plot.vue          |  44 +++++--
 src/components/vue-ui-xy.vue                  |  25 ++++
 20 files changed, 366 insertions(+), 117 deletions(-)

diff --git a/TestingArena/ArenaVueUiHistoryPlot.vue b/TestingArena/ArenaVueUiHistoryPlot.vue
index 8fbfa6ae..7b878856 100644
--- a/TestingArena/ArenaVueUiHistoryPlot.vue
+++ b/TestingArena/ArenaVueUiHistoryPlot.vue
@@ -12,7 +12,7 @@ const dataset = ref([
     {
         name: 'Series 1',
         values: [
-            { x: 2, y: 0, label: 'T1'},
+            { x: 2, y: 0, label: 'T1 with some sort\nof long name'},
             { x: 18, y: 0.2, label: 'T2'},
             { x: 21, y: 0.8, label: 'T3'},
             { x: 19, y: 1.2, label: 'T4'},
diff --git a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue
index b5de81ed..3a98dc00 100644
--- a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue
+++ b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue
@@ -166,7 +166,7 @@ const config = computed(() => {
                         ...c.style.chart.yAxis.labels,
                         roundings: [0, 0, 0, 1],
                         suffixes: ['$', '€', '£', '%'],
-                        axisNames: ['Axis 1', 'Axis 2', 'Axis 3', ''],
+                        axisNames: ['Axis 1 with some\nsort of long name', 'Axis 2', 'Axis 3', ''],
                         formatters: [
                             ({value, config}) => {
                                 return `f0 | ${value}`
diff --git a/TestingArena/ArenaVueUiQuadrant.vue b/TestingArena/ArenaVueUiQuadrant.vue
index d4206d19..2931067f 100644
--- a/TestingArena/ArenaVueUiQuadrant.vue
+++ b/TestingArena/ArenaVueUiQuadrant.vue
@@ -12,7 +12,7 @@ function makeDs(n,m) {
     const arr = [];
     for(let i = 0; i < n; i += 1) {
         arr.push({
-            name: 'Serie',
+            name: 'Serie with a name\n that is way too long',
             x: Math.random() > 0.5 ? Math.random()*m : -Math.random()*m,
             y: Math.random() > 0.5 ? Math.random()*m : -Math.random()*m,
         })
diff --git a/TestingArena/ArenaVueUiQuickChart.vue b/TestingArena/ArenaVueUiQuickChart.vue
index 83d343d9..80513947 100644
--- a/TestingArena/ArenaVueUiQuickChart.vue
+++ b/TestingArena/ArenaVueUiQuickChart.vue
@@ -262,9 +262,12 @@ const config = computed(() => {
         },
         theme: currentTheme.value,
         customPalette: ['#6376DD', "#DD3322", "#66DDAA"],
-        xyPeriods: monthValues.value,
+        // xyPeriods: monthValues.value,
+        xyPeriods: new Array(100).fill(0).map((el,i) => {
+            return `Some long label\nfor index ${i}`
+        }),
         datetimeFormatter: {
-            enable: true
+            enable: false
         }
     }
 })
diff --git a/TestingArena/ArenaVueUiRidgeline.vue b/TestingArena/ArenaVueUiRidgeline.vue
index eb6555a6..8a36b428 100644
--- a/TestingArena/ArenaVueUiRidgeline.vue
+++ b/TestingArena/ArenaVueUiRidgeline.vue
@@ -169,9 +169,12 @@ const config = computed(() => {
                     ...c.style.chart.xAxis,
                     labels: {
                         ...c.style.chart.xAxis.labels,
-                        values: monthValues.value,
+                        // values: monthValues.value,
+                        values: new Array(12).fill(0).map((el,i) => {
+                            return `Some long label\n with index ${i}`
+                        }),
                         datetimeFormatter: {
-                            enable: true,
+                            enable: false,
                         }
                     }
                 }
diff --git a/TestingArena/ArenaVueUiStackbar.vue b/TestingArena/ArenaVueUiStackbar.vue
index 38f98b3b..40a63d90 100644
--- a/TestingArena/ArenaVueUiStackbar.vue
+++ b/TestingArena/ArenaVueUiStackbar.vue
@@ -253,9 +253,12 @@ const config = computed(() => {
                         ...c.style.chart.grid.x,
                         timeLabels: {
                             ...c.style.chart.grid.x.timeLabels,
-                            values: monthValues.value,
+                            // values: monthValues.value,
+                            values: new Array(6).fill(0).map((d, i) => {
+                                return `Some long name\nfor dataset of index ${i}` 
+                            }),
                             datetimeFormatter: {
-                                enable: true
+                                enable: false
                             }
                             // values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
                         }
@@ -337,7 +340,7 @@ function selectTimeLabel(data) {
 
     <template #local>
         <LocalVueUiStackbar :dataset="dataset" :config="config" :key="`local_${step}`">
-            <template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
+            <!-- <template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
                 <g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">                
                     <text
                         :x="x"
@@ -358,7 +361,7 @@ function selectTimeLabel(data) {
                         {{ content }}
                     </text>
                 </g>
-            </template>
+            </template> -->
         </LocalVueUiStackbar>
     </template>
 
diff --git a/TestingArena/ArenaVueUiStripPlot.vue b/TestingArena/ArenaVueUiStripPlot.vue
index d97c4a83..0419fbcc 100644
--- a/TestingArena/ArenaVueUiStripPlot.vue
+++ b/TestingArena/ArenaVueUiStripPlot.vue
@@ -10,9 +10,9 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleLabels } = useAre
 
 const dataset = ref([
     {
-        name: "Asia",
+        name: "Some continent\nwith a long name",
         plots: [
-            { name: "Shanghai", value: 24.9 },
+            { name: "Some Country with\na long name", value: 24.9 },
             { name: "Beijing", value: 21.9 },
             { name: "Delhi", value: 16.8 },
             { name: "Guangzhou", value: 16.1 },
diff --git a/TestingArena/ArenaVueUiTreemap.vue b/TestingArena/ArenaVueUiTreemap.vue
index d6d1e08e..a478a1ea 100644
--- a/TestingArena/ArenaVueUiTreemap.vue
+++ b/TestingArena/ArenaVueUiTreemap.vue
@@ -14,7 +14,7 @@ const dataset = ref([
         value: 100,
         children: [
             {
-                name: 'Some kind of child',
+                name: 'Some kind of child with a very long name that is way too long',
                 value: 50
             },
             {
diff --git a/TestingArena/ArenaVueUiVerticalBar.vue b/TestingArena/ArenaVueUiVerticalBar.vue
index f9658fe5..fd297e2c 100644
--- a/TestingArena/ArenaVueUiVerticalBar.vue
+++ b/TestingArena/ArenaVueUiVerticalBar.vue
@@ -10,7 +10,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleSort } = useArena
 
 const dataset = ref([
     {
-        name: "Serie 1",
+        name: "Serie 1 with",
         value: 100.987987,
         children: [
             {
diff --git a/TestingArena/ArenaVueUiWaffle.vue b/TestingArena/ArenaVueUiWaffle.vue
index 99340c3e..b47cd36a 100644
--- a/TestingArena/ArenaVueUiWaffle.vue
+++ b/TestingArena/ArenaVueUiWaffle.vue
@@ -11,15 +11,15 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
 const dataset = ref([
     {
         name: 'Lorem Ipsum',
-        values: [100.27],
+        values: [1],
     },
     {
         name: 'Dolor Amet',
-        values: [66.3367]
+        values: [1]
     },
     {
         name: 'Dignissimos Ducimus',
-        values: [44.25]
+        values: [2]
     }
 ]);
 
diff --git a/TestingArena/ArenaVueUiXy.vue b/TestingArena/ArenaVueUiXy.vue
index e683fc8e..056ff148 100644
--- a/TestingArena/ArenaVueUiXy.vue
+++ b/TestingArena/ArenaVueUiXy.vue
@@ -831,9 +831,12 @@ const config = computed(() => {
                         },
                         xAxisLabels: {
                             ...c.chart.grid.labels.xAxisLabels,
-                            values: monthValues.value,
+                            // values: monthValues.value,
+                            values: new Array(13).fill(0).map((d,i) => {
+                                return `Some long name\nwith a value ${i}`
+                            }),
                             datetimeFormatter: {
-                                enable: true,
+                                enable: false,
                                 locale: 'en',
                                 useUTC: false,
                                 januaryAsYear: true,
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
index 2426261d..75c9ffc0 100644
--- a/src/components/vue-ui-donut-evolution.vue
+++ b/src/components/vue-ui-donut-evolution.vue
@@ -12,6 +12,7 @@ import {
     convertCustomPalette, 
     createCsvContent, 
     createUid, 
+    createTSpansFromLineBreaksOnX,
     dataLabel,
     deepEmptyObjectToNull,
     downloadCsv,
@@ -838,17 +839,36 @@ defineExpose({
             <!-- X LABELS -->
             <g v-if="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.show" :class="{'donut-opacity': true,}">
                 <g v-for="(_, i) in (slicer.end - slicer.start)">
-                    <text
-                        data-cy="axis-x-label"
-                        v-if="(FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast && (i === 0 || i === maxLength - 1)) || !FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast"
-                        :text-anchor="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? 'end' : 'middle'"
-                        :font-size="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize"
-                        :fill="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.color"
-                        :transform="`translate(${padding.left + (slit * i) + (slit / 2)}, ${FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.offsetY + svg.absoluteHeight - padding.bottom + FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize * 2}), rotate(${FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation})`"
-
-                    >
-                        {{ timeLabels[i] ? timeLabels[i].text  : '' }}
-                    </text>
+                    <g v-if="((FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast && (i === 0 || i === maxLength - 1)) || !FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast) && timeLabels[i] && timeLabels[i].text">
+                        <!-- SINGLE LINE -->
+                        <text
+                            v-if="!timeLabels[i].text.includes('\n')"
+                            data-cy="axis-x-label"
+                            :text-anchor="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? 'end' : 'middle'"
+                            :font-size="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize"
+                            :fill="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.color"
+                            :transform="`translate(${padding.left + (slit * i) + (slit / 2)}, ${FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.offsetY + svg.absoluteHeight - padding.bottom + FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize * 2}), rotate(${FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation})`"
+    
+                        >
+                            {{ timeLabels[i].text }}
+                        </text>
+                        <!-- MULTILINE -->
+                        <text
+                            v-else
+                            data-cy="axis-x-label"
+                            :text-anchor="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? 'end' : 'middle'"
+                            :font-size="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize"
+                            :fill="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.color"
+                            :transform="`translate(${padding.left + (slit * i) + (slit / 2)}, ${FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.offsetY + svg.absoluteHeight - padding.bottom + FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize * 2}), rotate(${FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation})`"
+                            v-html="createTSpansFromLineBreaksOnX({
+                                content: timeLabels[i].text,
+                                fontSize: FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize,
+                                fill: FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.color,
+                                x: 0,
+                                y: 0
+                            })"
+                        />
+                    </g>
                 </g>
             </g>
             
diff --git a/src/components/vue-ui-history-plot.vue b/src/components/vue-ui-history-plot.vue
index 619f67e1..27efc784 100644
--- a/src/components/vue-ui-history-plot.vue
+++ b/src/components/vue-ui-history-plot.vue
@@ -8,7 +8,8 @@ import {
     calculateNiceScale,
     convertColorToHex,
     convertCustomPalette, 
-    createCsvContent, 
+    createCsvContent,
+    createTSpansFromLineBreaksOnX,
     createUid, 
     darkenHexColor,
     dataLabel,
@@ -1036,23 +1037,50 @@ defineExpose({
                 />
 
                 <g v-if="FINAL_CONFIG.style.chart.plots.labels.show">
-                    <text
-                        data-cy="datapoint-label"
-                        v-for="plot in ds.plots"
-                        :x="plot.x + FINAL_CONFIG.style.chart.plots.labels.offsetX"
-                        :y="plot.y + FINAL_CONFIG.style.chart.plots.labels.offsetY + sizes.plots + sizes.labels"
-                        :font-size="sizes.labels"
-                        :fill="FINAL_CONFIG.style.chart.plots.labels.color"
-                        :font-weight="FINAL_CONFIG.style.chart.plots.labels.bold ? 'bold' : 'normal'"
-                        text-anchor="middle"
-                        :class="{ 'animated' : FINAL_CONFIG.useCssAnimation }"
-                        :style="{
-                            opacity: selectedDatapoint === null ? 1 : selectedDatapoint.id === plot.id ? 1 : 0.3,
-                            transition: 'opacity 0.2s ease-in-out'
-                        }"
-                    >
-                        {{ plot.label }}
-                    </text>
+                    <g v-for="plot in ds.plots">
+                        <!-- SINGLE LINE -->
+                        <text
+                            v-if="!plot.label.includes('\n')"
+                            data-cy="datapoint-label"
+                            :x="plot.x + FINAL_CONFIG.style.chart.plots.labels.offsetX"
+                            :y="plot.y + FINAL_CONFIG.style.chart.plots.labels.offsetY + sizes.plots + sizes.labels"
+                            :font-size="sizes.labels"
+                            :fill="FINAL_CONFIG.style.chart.plots.labels.color"
+                            :font-weight="FINAL_CONFIG.style.chart.plots.labels.bold ? 'bold' : 'normal'"
+                            text-anchor="middle"
+                            :class="{ 'animated' : FINAL_CONFIG.useCssAnimation }"
+                            :style="{
+                                opacity: selectedDatapoint === null ? 1 : selectedDatapoint.id === plot.id ? 1 : 0.3,
+                                transition: 'opacity 0.2s ease-in-out'
+                            }"
+                        >
+                            {{ plot.label }}
+                        </text>
+
+                        <!-- MULTILINE -->
+                        <text
+                            v-else
+                            data-cy="datapoint-label"
+                            :x="plot.x + FINAL_CONFIG.style.chart.plots.labels.offsetX"
+                            :y="plot.y + FINAL_CONFIG.style.chart.plots.labels.offsetY + sizes.plots + sizes.labels"
+                            :font-size="sizes.labels"
+                            :fill="FINAL_CONFIG.style.chart.plots.labels.color"
+                            :font-weight="FINAL_CONFIG.style.chart.plots.labels.bold ? 'bold' : 'normal'"
+                            text-anchor="middle"
+                            :class="{ 'animated' : FINAL_CONFIG.useCssAnimation }"
+                            :style="{
+                                opacity: selectedDatapoint === null ? 1 : selectedDatapoint.id === plot.id ? 1 : 0.3,
+                                transition: 'opacity 0.2s ease-in-out'
+                            }"
+                            v-html="createTSpansFromLineBreaksOnX({
+                                content: plot.label,
+                                fontSize: sizes.labels,
+                                fill: FINAL_CONFIG.style.chart.plots.labels.color,
+                                x: plot.x + FINAL_CONFIG.style.chart.plots.labels.offsetX,
+                                y: plot.y + FINAL_CONFIG.style.chart.plots.labels.offsetY + sizes.plots + sizes.labels
+                            })"
+                        />
+                    </g>
                 </g>
 
                 <!-- INDEX LABELS -->
diff --git a/src/components/vue-ui-parallel-coordinate-plot.vue b/src/components/vue-ui-parallel-coordinate-plot.vue
index 9527e6a9..94227589 100644
--- a/src/components/vue-ui-parallel-coordinate-plot.vue
+++ b/src/components/vue-ui-parallel-coordinate-plot.vue
@@ -8,6 +8,7 @@ import {
     createCsvContent, 
     createSmoothPath,
     createStraightPath,
+    createTSpansFromLineBreaksOnX,
     createUid, 
     dataLabel, 
     downloadCsv, 
@@ -733,7 +734,9 @@ defineExpose({
                 />
 
                 <!-- AXIS NAMES -->
+                <!-- SINGLE LINE -->
                 <text
+                    v-if="!scale.name.includes('\n')"
                     data-cy="pcp-axis-label"
                     :x="drawingArea.left + (slot * i) + (slot / 2)"
                     :y="drawingArea.top - 24"
@@ -745,6 +748,25 @@ defineExpose({
                     {{ scale.name }}
                 </text>
 
+                <!-- MULTILINE -->
+                <text
+                    v-else
+                    data-cy="pcp-axis-label"
+                    :x="drawingArea.left + (slot * i) + (slot / 2)"
+                    :y="drawingArea.top - 24"
+                    :fill="FINAL_CONFIG.style.chart.yAxis.labels.axisNamesColor"
+                    :font-size="chartDimensions.axisNameFontSize"
+                    :font-weight="FINAL_CONFIG.style.chart.yAxis.labels.axisNamesBold ? 'bold' : ''"
+                    text-anchor="middle"
+                    v-html="createTSpansFromLineBreaksOnX({
+                        content: scale.name,
+                        fontSize: chartDimensions.axisNameFontSize,
+                        fill: FINAL_CONFIG.style.chart.yAxis.labels.axisNamesColor,
+                        x: drawingArea.left + (slot * i) + (slot / 2),
+                        y: drawingArea.top - 24
+                    })"
+                />
+
 
                 <template v-if="FINAL_CONFIG.style.chart.yAxis.labels.ticks.show">                
                     <!-- TICKS -->
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index fb710b21..5093a5bd 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -7,6 +7,7 @@ import {
     convertCustomPalette,
     createCsvContent, 
     createUid,
+    createTSpansFromLineBreaksOnX,
     dataLabel,
     downloadCsv,
     error,
@@ -1408,17 +1409,36 @@ defineExpose({
 
                 <g v-if="mutableConfig.plotLabels.show" style="pointer-events: none;">
                     <g v-for="category in drawableDataset">
-                        <text
-                            data-cy="plot-label"
-                            v-for="plot in category.series" 
-                            :x="plot.x" 
-                            :y="plot.y + FINAL_CONFIG.style.chart.layout.labels.plotLabels.offsetY + FINAL_CONFIG.style.chart.layout.plots.radius" 
-                            text-anchor="middle" 
-                            :font-size="FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize / (isZoom ? 1.5 : 1)"
-                            :fill="FINAL_CONFIG.style.chart.layout.labels.plotLabels.color"
-                        >
-                            {{ plot.name }}
-                        </text>
+                        <g v-for="plot in category.series">
+                            <!-- SINGLE LINE -->
+                            <text
+                                v-if="!plot.name.includes('\n')"
+                                data-cy="plot-label"
+                                :x="plot.x" 
+                                :y="plot.y + FINAL_CONFIG.style.chart.layout.labels.plotLabels.offsetY + FINAL_CONFIG.style.chart.layout.plots.radius" 
+                                text-anchor="middle" 
+                                :font-size="FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize / (isZoom ? 1.5 : 1)"
+                                :fill="FINAL_CONFIG.style.chart.layout.labels.plotLabels.color"
+                            >
+                                {{ plot.name }}
+                            </text>
+                            <text
+                                v-else
+                                data-cy="plot-label"
+                                :x="plot.x" 
+                                :y="plot.y + FINAL_CONFIG.style.chart.layout.labels.plotLabels.offsetY + FINAL_CONFIG.style.chart.layout.plots.radius" 
+                                text-anchor="middle" 
+                                :font-size="FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize / (isZoom ? 1.5 : 1)"
+                                :fill="FINAL_CONFIG.style.chart.layout.labels.plotLabels.color"
+                                v-html="createTSpansFromLineBreaksOnX({
+                                    content: plot.name,
+                                    fontSize: FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize / (isZoom ? 1.5 : 1),
+                                    fill: FINAL_CONFIG.style.chart.layout.labels.plotLabels.color,
+                                    x: plot.x,
+                                    y: plot.y + FINAL_CONFIG.style.chart.layout.labels.plotLabels.offsetY + FINAL_CONFIG.style.chart.layout.plots.radius
+                                })"
+                            />
+                        </g>
                     </g>
                 </g>
             </template>
@@ -1429,7 +1449,7 @@ defineExpose({
                         <foreignObject v-for="plot in category.series" style="overflow: visible;" height="10" width="100" :x="plot.x - 50" :y="plot.y - (FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize)" @mouseover="useTooltip(category, plot, i)"
                             @mouseleave="isTooltip = false; hoveredPlotId = null; hoveredPlot = null"
                             @click="selectPlot(category, plot)">
-                            <div :style="`color:${adaptColorToBackground(category.color)};margin: 0 auto; font-size:${FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${category.color}; padding: 2px 4px; border-radius: 12px; height: ${FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize*1.5}px`">
+                            <div :style="`color:${adaptColorToBackground(category.color)};margin: 0 auto; font-size:${FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${category.color}; padding: 2px 4px; border-radius: 12px; height: fit-content;`">
                                 {{  plot.name }}
                             </div>
                         </foreignObject>
diff --git a/src/components/vue-ui-quick-chart.vue b/src/components/vue-ui-quick-chart.vue
index 10c6f2e3..72793c4c 100644
--- a/src/components/vue-ui-quick-chart.vue
+++ b/src/components/vue-ui-quick-chart.vue
@@ -12,6 +12,7 @@ import {
     convertCustomPalette,
     createSmoothPath,
     createUid,
+    createTSpansFromLineBreaksOnX,
     dataLabel,
     error,
     functionReturnsString,
@@ -1359,16 +1360,33 @@ defineExpose({
                             :stroke-width="FINAL_CONFIG.xyAxisStrokeWidth"
                             stroke-linecap="round"
                         />
-                        <text
-                            v-if="(!FINAL_CONFIG.xyPeriodsShowOnlyAtModulo || (FINAL_CONFIG.xyPeriodsShowOnlyAtModulo && (i % Math.floor((slicer.end - slicer.start) / FINAL_CONFIG.xyPeriodsModulo) === 0)) || (slicer.end - slicer.start <= FINAL_CONFIG.xyPeriodsModulo))"
-                            data-cy="period-label"
-                            :font-size="FINAL_CONFIG.xyLabelsXFontSize"
-                            :text-anchor="FINAL_CONFIG.xyPeriodLabelsRotation > 0 ? 'start' : FINAL_CONFIG.xyPeriodLabelsRotation < 0 ? 'end' : 'middle'"
-                            :fill="FINAL_CONFIG.color"
-                            :transform="`translate(${line.drawingArea.left + (line.slotSize * (i+1)) - (line.slotSize / 2)}, ${line.drawingArea.bottom + FINAL_CONFIG.xyLabelsXFontSize + 6}), rotate(${FINAL_CONFIG.xyPeriodLabelsRotation})`"
-                        >
-                            {{ period }}
-                        </text>
+                        <g v-if="(!FINAL_CONFIG.xyPeriodsShowOnlyAtModulo || (FINAL_CONFIG.xyPeriodsShowOnlyAtModulo && (i % Math.floor((slicer.end - slicer.start) / FINAL_CONFIG.xyPeriodsModulo) === 0)) || (slicer.end - slicer.start <= FINAL_CONFIG.xyPeriodsModulo))">
+                            <text
+                                v-if="!period.includes('\n')"
+                                data-cy="period-label"
+                                :font-size="FINAL_CONFIG.xyLabelsXFontSize"
+                                :text-anchor="FINAL_CONFIG.xyPeriodLabelsRotation > 0 ? 'start' : FINAL_CONFIG.xyPeriodLabelsRotation < 0 ? 'end' : 'middle'"
+                                :fill="FINAL_CONFIG.color"
+                                :transform="`translate(${line.drawingArea.left + (line.slotSize * (i+1)) - (line.slotSize / 2)}, ${line.drawingArea.bottom + FINAL_CONFIG.xyLabelsXFontSize + 6}), rotate(${FINAL_CONFIG.xyPeriodLabelsRotation})`"
+                            >
+                                {{ period }}
+                            </text>
+                            <text
+                                v-else
+                                data-cy="period-label"
+                                :font-size="FINAL_CONFIG.xyLabelsXFontSize"
+                                :text-anchor="FINAL_CONFIG.xyPeriodLabelsRotation > 0 ? 'start' : FINAL_CONFIG.xyPeriodLabelsRotation < 0 ? 'end' : 'middle'"
+                                :fill="FINAL_CONFIG.color"
+                                :transform="`translate(${line.drawingArea.left + (line.slotSize * (i+1)) - (line.slotSize / 2)}, ${line.drawingArea.bottom + FINAL_CONFIG.xyLabelsXFontSize + 6}), rotate(${FINAL_CONFIG.xyPeriodLabelsRotation})`"
+                                v-html="createTSpansFromLineBreaksOnX({
+                                    content: period,
+                                    fontSize: FINAL_CONFIG.xyLabelsXFontSize,
+                                    fill: FINAL_CONFIG.color,
+                                    x: 0,
+                                    y: 0
+                                })"
+                            />
+                        </g>
                     </template>
                 </g>
                 <g class="plots">
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index d3694239..9340a7d3 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -9,6 +9,7 @@ import {
     createSmoothAreaSegments,
     createSmoothPath,
     createStraightPath,
+    createTSpansFromLineBreaksOnX,
     createUid,
     dataLabel,
     deepEmptyObjectToNull,
@@ -861,11 +862,14 @@ defineExpose({
                         x: xLabel.selectorX,
                         y: drawableArea.top + xLabel.height + FINAL_CONFIG.style.chart.xAxis.labels.offsetY
                     }">
-                        <text
-                            v-if="(xLabel && !FINAL_CONFIG.style.chart.xAxis.labels.showOnlyFirstAndLast && !FINAL_CONFIG.style.chart.xAxis.labels.showOnlyAtModulo) ||
+                        <g v-if="(xLabel && !FINAL_CONFIG.style.chart.xAxis.labels.showOnlyFirstAndLast && !FINAL_CONFIG.style.chart.xAxis.labels.showOnlyAtModulo) ||
                                 (xLabel && FINAL_CONFIG.style.chart.xAxis.labels.showOnlyFirstAndLast && (i === 0 || i === xAxisTrapsAndLabels.length - 1)) ||
                                 (xLabel && selectedX && selectedX.index === i) ||
                                 (xLabel && !FINAL_CONFIG.style.chart.xAxis.labels.showOnlyFirstAndLast && FINAL_CONFIG.style.chart.xAxis.labels.showOnlyAtModulo && (i % Math.floor(xAxisTrapsAndLabels.length / FINAL_CONFIG.style.chart.xAxis.labels.modulo)) === 0)"
+                        >
+                        <!-- SINGLE LINE -->
+                        <text
+                            v-if="!xLabel.label.includes('\n')"
                             :font-size="FINAL_CONFIG.style.chart.xAxis.labels.fontSize"
                             :fill="FINAL_CONFIG.style.chart.xAxis.labels.color"
                             :font-weight="FINAL_CONFIG.style.chart.xAxis.labels.bold ? 'bold' : 'normal'"
@@ -876,6 +880,27 @@ defineExpose({
                             }">
                             {{ xLabel.label }}
                         </text>
+                        
+                        <!-- MULTILINE -->
+                        <text
+                            v-else
+                            :font-size="FINAL_CONFIG.style.chart.xAxis.labels.fontSize"
+                            :fill="FINAL_CONFIG.style.chart.xAxis.labels.color"
+                            :font-weight="FINAL_CONFIG.style.chart.xAxis.labels.bold ? 'bold' : 'normal'"
+                            :transform="`translate(${xLabel.selectorX}, ${drawableArea.top + xLabel.height + FINAL_CONFIG.style.chart.xAxis.labels.offsetY}), rotate(${FINAL_CONFIG.style.chart.xAxis.labels.rotation})`"
+                            :text-anchor="FINAL_CONFIG.style.chart.xAxis.labels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.xAxis.labels.rotation < 0 ? 'end' : 'middle'"
+                            :style="{
+                                opacity: selectedX ? selectedX.index === i ? 1 : 0.2 : 1
+                            }"
+                            v-html="createTSpansFromLineBreaksOnX({
+                                content: xLabel.label,
+                                fontSize: FINAL_CONFIG.style.chart.xAxis.labels.fontSize,
+                                fill: FINAL_CONFIG.style.chart.xAxis.labels.color,
+                                x: 0,
+                                y: 0
+                            })"
+                        />
+                        </g>
                     </slot>
                 </template>
             </g>
diff --git a/src/components/vue-ui-stackbar.vue b/src/components/vue-ui-stackbar.vue
index f73b0d07..cfbef315 100755
--- a/src/components/vue-ui-stackbar.vue
+++ b/src/components/vue-ui-stackbar.vue
@@ -8,8 +8,10 @@ import {
     calculateNiceScaleWithExactExtremes, 
     convertColorToHex, 
     convertCustomPalette, 
-    createCsvContent, 
-    createUid, 
+    createCsvContent,
+    createTSpansFromLineBreaksOnX,
+    createTSpansFromLineBreaksOnY,
+    createUid,
     dataLabel, 
     downloadCsv,
     error, 
@@ -1347,21 +1349,55 @@ defineExpose({
                     </g>
                 </g>
                 <g v-else>
-                    <text
-                        data-cy="time-label"
-                        v-for="(timeLabel, i) in timeLabels"
-                        :text-anchor="FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation < 0 ? 'end' : 'middle'"
-                        :font-size="FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize"
-                        :font-weight="FINAL_CONFIG.style.chart.grid.x.timeLabels.bold ? 'bold': 'normal'"
-                        :fill="FINAL_CONFIG.style.chart.grid.x.timeLabels.color"
-                        :transform="`translate(${drawingArea.left + (barSlot * i) + barSlot / 2}, ${drawingArea.bottom + FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize * 1.3 + FINAL_CONFIG.style.chart.grid.x.timeLabels.offsetY}), rotate(${FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation})`"
-                        :style="{
-                            cursor: 'pointer'
-                        }"
-                        @click="() => selectTimeLabel(timeLabel, i)"
-                    >
-                        {{ timeLabel.text }}
-                    </text>
+                    <g v-for="(timeLabel, i) in timeLabels">
+                        <text
+                            v-if="!timeLabel.text.includes('\n')"
+                            :key="i"
+                            data-cy="time-label"
+                            :text-anchor="FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation > 0
+                                ? 'start'
+                                : FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation < 0
+                                ? 'end'
+                                : 'middle'"
+                            :font-size="FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize"
+                            :font-weight="FINAL_CONFIG.style.chart.grid.x.timeLabels.bold ? 'bold' : 'normal'"
+                            :fill="FINAL_CONFIG.style.chart.grid.x.timeLabels.color"
+                            :transform="`translate(${drawingArea.left + barSlot * i + barSlot / 2}, ${drawingArea.bottom + FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize * 1.3 + FINAL_CONFIG.style.chart.grid.x.timeLabels.offsetY}), rotate(${FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation})`"
+                            style="cursor: pointer"
+                            @click="() => selectTimeLabel(timeLabel, i)"
+                        >
+    
+                            {{ timeLabel.text }}
+                        </text>
+                        <text
+                            v-else
+                            :key="i + '-multi'"
+                            data-cy="time-label"
+                            :text-anchor="FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation > 0
+                                ? 'start'
+                                : FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation < 0
+                                ? 'end'
+                                : 'middle'"
+                            :font-size="FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize"
+                            :fill="FINAL_CONFIG.style.chart.grid.x.timeLabels.color"
+                            :transform="`
+                                translate(
+                                ${drawingArea.left + barSlot * i + barSlot / 2},
+                                ${drawingArea.bottom + FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize * 1.3 + FINAL_CONFIG.style.chart.grid.x.timeLabels.offsetY}
+                                ),
+                                rotate(${FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation})
+                            `"
+                            style="cursor: pointer"
+                            v-html="createTSpansFromLineBreaksOnX({
+                                content: timeLabel.text,
+                                fontSize: FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize,
+                                fill: FINAL_CONFIG.style.chart.grid.x.timeLabels.color,
+                                x: 0,
+                                y: 0
+                            })"
+                            @click="() => selectTimeLabel(timeLabel, i)"
+                        />
+                    </g>
                 </g>
             </template>
 
@@ -1383,22 +1419,43 @@ defineExpose({
                     </g>
                 </g>
                 <g v-else>
-                    <text
-                        data-cy="time-label"
-                        v-for="(timeLabel, i) in timeLabels"
-                        text-anchor="end"
-                        :font-size="FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize"
-                        :font-weight="FINAL_CONFIG.style.chart.grid.y.axisLabels.bold ? 'bold' : 'normal'"
-                        :fill="FINAL_CONFIG.style.chart.grid.y.axisLabels.color"
-                        :x="drawingArea.left - 8"
-                        :y="drawingArea.top + (barSlot * i ) + (barSlot / 2) + FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize / 3"
-                        :style="{
-                            cursor: 'pointer'
-                        }"
-                        @click="() => selectTimeLabel(timeLabel, i)"
-                    >
-                        {{ timeLabel.text }}
-                    </text>
+                    <g v-for="(timeLabel, i) in timeLabels">
+                        <text
+                            v-if="!timeLabel.text.includes('\n')"
+                            data-cy="time-label"
+                            text-anchor="end"
+                            :font-size="FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize"
+                            :font-weight="FINAL_CONFIG.style.chart.grid.y.axisLabels.bold ? 'bold' : 'normal'"
+                            :fill="FINAL_CONFIG.style.chart.grid.y.axisLabels.color"
+                            :x="drawingArea.left - 8"
+                            :y="drawingArea.top + (barSlot * i ) + (barSlot / 2) + FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize / 3"
+                            :style="{
+                                cursor: 'pointer'
+                            }"
+                            @click="() => selectTimeLabel(timeLabel, i)"
+                        >
+                            {{ timeLabel.text }}
+                        </text>
+                        <text
+                            v-else
+                            data-cy="time-label"
+                            text-anchor="end"
+                            :font-size="FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize"
+                            :font-weight="FINAL_CONFIG.style.chart.grid.y.axisLabels.bold ? 'bold' : 'normal'"
+                            :fill="FINAL_CONFIG.style.chart.grid.y.axisLabels.color"
+                            :x="drawingArea.left - 8"
+                            :y="drawingArea.top + barSlot * i + barSlot / 2 + FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize / 3"
+                            style="cursor: pointer"
+                            @click="() => selectTimeLabel(timeLabel, i)"
+                            v-html="createTSpansFromLineBreaksOnY({
+                                content: timeLabel.text,
+                                fontSize: FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize,
+                                fill: FINAL_CONFIG.style.chart.grid.y.axisLabels.color,
+                                x: drawingArea.left - 8,
+                                y: 0
+                            })"
+                        />
+                    </g>
                 </g>
             </template>
 
diff --git a/src/components/vue-ui-strip-plot.vue b/src/components/vue-ui-strip-plot.vue
index 110fb1d0..b9fd4205 100644
--- a/src/components/vue-ui-strip-plot.vue
+++ b/src/components/vue-ui-strip-plot.vue
@@ -7,6 +7,7 @@ import {
     convertColorToHex,
     convertCustomPalette,
     createCsvContent,
+    createTSpansFromLineBreaksOnX,
     createUid,
     darkenHexColor,
     dataLabel,
@@ -728,17 +729,38 @@ defineExpose({
 
             <!-- X AXIS LABELS -->
             <template v-if="FINAL_CONFIG.style.chart.labels.xAxisLabels.show">
-                <text
-                    data-cy="axis-x-label"
-                    v-for="(label, i) in mutableDataset"
-                    :x="drawingArea.left + ((i+1) * drawingArea.stripWidth) - drawingArea.stripWidth / 2"
-                    :y="drawingArea.bottom + FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize * 2  + FINAL_CONFIG.style.chart.labels.xAxisLabels.offsetY"
-                    :font-size="FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize"
-                    :fill="FINAL_CONFIG.style.chart.labels.xAxisLabels.color"
-                    text-anchor="middle"
-                >
-                    {{ label.name }}
-                </text>
+                <g v-for="(label, i) in mutableDataset">
+                    <!-- SINGLE LINE -->     
+                    <text
+                        v-if="!label.name.includes('\n')"
+                        data-cy="axis-x-label"
+                        :x="drawingArea.left + ((i+1) * drawingArea.stripWidth) - drawingArea.stripWidth / 2"
+                        :y="drawingArea.bottom + FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize * 2  + FINAL_CONFIG.style.chart.labels.xAxisLabels.offsetY"
+                        :font-size="FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize"
+                        :fill="FINAL_CONFIG.style.chart.labels.xAxisLabels.color"
+                        text-anchor="middle"
+                    >
+                        {{ label.name }}
+                    </text>
+
+                    <!-- MULTILINE -->
+                    <text
+                        v-else
+                        data-cy="axis-x-label"
+                        :x="drawingArea.left + ((i+1) * drawingArea.stripWidth) - drawingArea.stripWidth / 2"
+                        :y="drawingArea.bottom + FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize * 2  + FINAL_CONFIG.style.chart.labels.xAxisLabels.offsetY"
+                        :font-size="FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize"
+                        :fill="FINAL_CONFIG.style.chart.labels.xAxisLabels.color"
+                        text-anchor="middle"
+                        v-html="createTSpansFromLineBreaksOnX({
+                            content: label.name,
+                            fontSize: FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize,
+                            fill: FINAL_CONFIG.style.chart.labels.xAxisLabels.color,
+                            x: drawingArea.left + ((i+1) * drawingArea.stripWidth) - drawingArea.stripWidth / 2,
+                            y: drawingArea.bottom + FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize * 2  + FINAL_CONFIG.style.chart.labels.xAxisLabels.offsetY
+                        })"
+                    />
+                </g>
             </template>
 
             <!-- Y AXIS NAME-->
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index 67581a56..0d7eabd1 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -1170,7 +1170,9 @@
                         <g v-for="(label, i) in timeLabels" :key="`time_label_${i}`">
                             <template 
                             v-if="(label && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && (i === 0 || i === timeLabels.length -1) && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && selectedSerieIndex === i && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo && (i % Math.floor((this.slicer.end - this.slicer.start) / FINAL_CONFIG.chart.grid.labels.xAxisLabels.modulo) === 0))">
+                                <!-- SINGLE LINE LABEL -->
                                 <text
+                                    v-if="!label.text.includes('\n')"
                                     data-cy="time-label"
                                     :text-anchor="FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation > 0 ? 'start' : FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation < 0 ? 'end' : 'middle'"
                                     :font-size="fontSizes.xAxis"
@@ -1183,6 +1185,27 @@
                                 >
                                     {{ label.text || "" }}
                                 </text>
+
+                                <!-- MULTILINE LABEL (when label includes \n) -->
+                                <text
+                                    v-else
+                                    data-cy="time-label"
+                                    :text-anchor="FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation > 0 ? 'start' : FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation < 0 ? 'end' : 'middle'"
+                                    :font-size="fontSizes.xAxis"
+                                    :fill="FINAL_CONFIG.chart.grid.labels.xAxisLabels.color"
+                                    :transform="`translate(${drawingArea.left + (drawingArea.width / maxSeries) * i + (drawingArea.width / maxSeries / 2)}, ${drawingArea.bottom + fontSizes.xAxis * 1.3 + FINAL_CONFIG.chart.grid.labels.xAxisLabels.yOffset}), rotate(${FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation})`"
+                                    :style="{
+                                        cursor: usesSelectTimeLabelEvent() ? 'pointer' : 'default'
+                                    }"
+                                    v-html="createTSpansFromLineBreaksOnX({
+                                        content: label.text,
+                                        fontSize: fontSizes.xAxis,
+                                        fill: FINAL_CONFIG.chart.grid.labels.xAxisLabels.color,
+                                        x: 0,
+                                        y: 0
+                                    })"
+                                    @click="() => selectTimeLabel(label, i)"
+                                />
                             </template>
                         </g>
                     </template>
@@ -1672,6 +1695,7 @@ import {
     createStraightPath,
     createStar,
     createTSpans,
+    createTSpansFromLineBreaksOnX,
     createUid,
     dataLabel,
     downloadCsv,
@@ -3029,6 +3053,7 @@ export default {
         createSmoothPath,
         createStraightPath,
         createTSpans,
+        createTSpansFromLineBreaksOnX,
         dataLabel,
         downloadCsv,
         error,

From 4cf4522493d75b81dc34c4754b8bfefd5e00122c Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 9 Jul 2025 14:42:22 +0200
Subject: [PATCH 3/8] Fix - VueUiDonut - Remove opacity from arc colors

---
 src/components/vue-ui-donut.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
index 7350741e..c6fe6a76 100644
--- a/src/components/vue-ui-donut.vue
+++ b/src/components/vue-ui-donut.vue
@@ -973,6 +973,12 @@ defineExpose({
             <template v-if="total && FINAL_CONFIG.type === 'classic'">
                 <path v-for="(arc, i) in noGhostDonut" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
                     :d="arc.arcSlice" fill="#FFFFFF" />
+                <path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path" :data-cy="`donut-arc-${i}`"
+                    :d="arc.arcSlice" :fill="arc.color"
+                    :stroke="FINAL_CONFIG.style.chart.backgroundColor"
+                    :stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)" 
+                        
+                />
                 <g v-if="$slots.pattern">
                     <path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path"
                         :data-cy="`donut-arc-pattern-${arc.patternIndex}`" :d="arc.arcSlice"
@@ -980,12 +986,6 @@ defineExpose({
                         :stroke="FINAL_CONFIG.style.chart.backgroundColor"
                         :stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)" />
                 </g>
-                <path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path" :data-cy="`donut-arc-${i}`"
-                    :d="arc.arcSlice" :fill="setOpacity(arc.color, 80)"
-                    :stroke="FINAL_CONFIG.style.chart.backgroundColor"
-                    :stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)" 
-                        
-                />
             </template>
 
             <template v-if="total && FINAL_CONFIG.type === 'polar'">

From aacd6f3fc93e721cc1a15ddbae1797f026ce8b38 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 9 Jul 2025 14:42:55 +0200
Subject: [PATCH 4/8] Fix - VueUiWaffle - Better display when datapoint values
 are empty arrays

---
 src/components/vue-ui-waffle.vue | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
index 841aa57b..febc4fd0 100644
--- a/src/components/vue-ui-waffle.vue
+++ b/src/components/vue-ui-waffle.vue
@@ -261,7 +261,11 @@ function calculateProportions(numbers) {
     return intParts;
 }
 
+const allDatapointsAreEmpty = ref(false);
+
 function prepareDataset() {
+    allDatapointsAreEmpty.value = props.dataset.flatMap(ds => ds.values.reduce((a, b) => a + b, 0)).reduce((a, b) => a + b, 0) === 0;
+
     return props.dataset.map((s, i) => {
         return {
             ...s,
@@ -285,13 +289,25 @@ watch(() => props.dataset, (_) => {
 const proportions = computed(() => {
     const numbers = datasetCopy.value
         .filter((serie,i) => !segregated.value.includes(serie.uid))
-        .map((serie, i) => (serie.values || []).reduce((a,b) => a + b, 0));
+        .map((serie, i) => {
+            if (allDatapointsAreEmpty.value) {
+                return 1;
+            } else {
+                return (serie.values || []).reduce((a,b) => a + b, 0)
+            }
+        });
     return calculateProportions(numbers);
 });
 
 const immutableProportions = computed(() => {
     const numbers = datasetCopy.value
-        .map((serie, i) => (serie.values || []).reduce((a,b) => a + b));
+        .map((serie, i) => {
+            if (allDatapointsAreEmpty.value) {
+                return 1;
+            } else {
+                return (serie.values || []).reduce((a,b) => a + b);
+            }
+        });
     return calculateProportions(numbers);
 });
 
@@ -413,6 +429,7 @@ const rafUp = ref(null);
 const rafDown = ref(null);
 
 function segregate(uid) {
+    if (allDatapointsAreEmpty.value) return; // No point in segregating anything in this case
     if (!FINAL_CONFIG.value.useAnimation) {
         if(segregated.value.includes(uid)) {
             segregated.value = segregated.value.filter(s => s !== uid);
@@ -426,6 +443,8 @@ function segregate(uid) {
     const source = datasetCopy.value.find(el => el.uid === uid).values.reduce((a, b) => a + b, 0);
     let initVal = source;
 
+    if (source === 0 && target === 0) return; // Nothing to segregate
+
     if(segregated.value.includes(uid)) {
         segregated.value = segregated.value.filter(s => s !== uid);
         const targetVal = target;
@@ -594,7 +613,7 @@ function useTooltip(index) {
         }
         if(FINAL_CONFIG.value.style.chart.tooltip.showPercentage) {
             const dp = dataLabel({
-                v: selected.value / total.value * 100,
+                v: allDatapointsAreEmpty.value ? 1 / props.dataset.length * 100 : selected.value / total.value * 100,
                 s: '%',
                 r: FINAL_CONFIG.value.style.chart.tooltip.roundingPercentage
             });

From f9030c2a252078ed2761fc5b147fefadffda7ad8 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 9 Jul 2025 14:43:09 +0200
Subject: [PATCH 5/8] Update README.md

---
 README.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/README.md b/README.md
index ab05ccf1..1446818c 100755
--- a/README.md
+++ b/README.md
@@ -1059,6 +1059,23 @@ const merged = mergeConfigs({
 });
 ```
 
+## Multiline data labels
+
+Some components will display labels on mutliple lines when the provided text contains a line break. (example: "I contain\na line break").
+Below is a table of the places where such line breaks can be used:
+
+| Component                   | Label displayed      | Where to use line breaks                               |
+| --------------------------- | -------------------- | ------------------------------------------------------ |
+| VueUiXy                     | Time labels (x axis) | config.chart.grid.labels.xAxisLabels.values            |
+| VueUiDonutEvolution         | Time labels (x axis) | config.style.chart.layout.grid.xAxis.dataLabels.values |
+| VueUiHistoryPlot            | Plot labels          | dataset names                                          |
+| VueUiParallelCoordinatePlot | Axis labels          | config.style.chart.yAxis.labels.axisNames              |
+| VueUiQuadrant               | Plot labels          | dataset names                                          |
+| VueUiQuickChart             | Time labels (x axis) | config.xyPeriods                                       |
+| VueUiRidgeline              | Time labels (x axis) | config.style.chart.xAxis.labels.values                 |
+| VueUiStackbar               | Time labels (x axis) | config.style.chart.grid.x.timeLabels.values            |
+| VueUiStripPlot              | x axis labels        | dataset names                                          |
+
 ## PDF generation
 
 This package requires jspdf as a peer dependency. Please install it in your project if you intend on using the PDF printing feature.

From 5394d22cd63478fb136fad2e3b13a34b88ad5dd8 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 9 Jul 2025 14:43:26 +0200
Subject: [PATCH 6/8] 2.14.3-beta.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 34848f97..61dbb38f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.14.2",
+  "version": "2.14.3-beta.0",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.14.2",
+      "version": "2.14.3-beta.0",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.0",
diff --git a/package.json b/package.json
index 26bfb19c..f98e2903 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.14.2",
+  "version": "2.14.3-beta.0",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [

From 3bd6b89060f1193445bf1286feb3c0e00f12c10e Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 9 Jul 2025 15:03:37 +0200
Subject: [PATCH 7/8] Fix - Prevent error when checking for line breaks on
 timestamps

---
 src/components/vue-ui-donut-evolution.vue          | 4 ++--
 src/components/vue-ui-history-plot.vue             | 4 ++--
 src/components/vue-ui-parallel-coordinate-plot.vue | 4 ++--
 src/components/vue-ui-quadrant.vue                 | 4 ++--
 src/components/vue-ui-quick-chart.vue              | 4 ++--
 src/components/vue-ui-ridgeline.vue                | 6 +++---
 src/components/vue-ui-stackbar.vue                 | 8 ++++----
 src/components/vue-ui-strip-plot.vue               | 4 ++--
 src/components/vue-ui-xy.vue                       | 4 ++--
 9 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
index 75c9ffc0..5e01a82e 100644
--- a/src/components/vue-ui-donut-evolution.vue
+++ b/src/components/vue-ui-donut-evolution.vue
@@ -842,7 +842,7 @@ defineExpose({
                     <g v-if="((FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast && (i === 0 || i === maxLength - 1)) || !FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast) && timeLabels[i] && timeLabels[i].text">
                         <!-- SINGLE LINE -->
                         <text
-                            v-if="!timeLabels[i].text.includes('\n')"
+                            v-if="!String(timeLabels[i].text).includes('\n')"
                             data-cy="axis-x-label"
                             :text-anchor="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? 'end' : 'middle'"
                             :font-size="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize"
@@ -861,7 +861,7 @@ defineExpose({
                             :fill="FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.color"
                             :transform="`translate(${padding.left + (slit * i) + (slit / 2)}, ${FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.offsetY + svg.absoluteHeight - padding.bottom + FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize * 2}), rotate(${FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.rotation})`"
                             v-html="createTSpansFromLineBreaksOnX({
-                                content: timeLabels[i].text,
+                                content: String(timeLabels[i].text),
                                 fontSize: FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.fontSize,
                                 fill: FINAL_CONFIG.style.chart.layout.grid.xAxis.dataLabels.color,
                                 x: 0,
diff --git a/src/components/vue-ui-history-plot.vue b/src/components/vue-ui-history-plot.vue
index 27efc784..a28d333b 100644
--- a/src/components/vue-ui-history-plot.vue
+++ b/src/components/vue-ui-history-plot.vue
@@ -1040,7 +1040,7 @@ defineExpose({
                     <g v-for="plot in ds.plots">
                         <!-- SINGLE LINE -->
                         <text
-                            v-if="!plot.label.includes('\n')"
+                            v-if="!String(plot.label).includes('\n')"
                             data-cy="datapoint-label"
                             :x="plot.x + FINAL_CONFIG.style.chart.plots.labels.offsetX"
                             :y="plot.y + FINAL_CONFIG.style.chart.plots.labels.offsetY + sizes.plots + sizes.labels"
@@ -1073,7 +1073,7 @@ defineExpose({
                                 transition: 'opacity 0.2s ease-in-out'
                             }"
                             v-html="createTSpansFromLineBreaksOnX({
-                                content: plot.label,
+                                content: String(plot.label),
                                 fontSize: sizes.labels,
                                 fill: FINAL_CONFIG.style.chart.plots.labels.color,
                                 x: plot.x + FINAL_CONFIG.style.chart.plots.labels.offsetX,
diff --git a/src/components/vue-ui-parallel-coordinate-plot.vue b/src/components/vue-ui-parallel-coordinate-plot.vue
index 94227589..f1842646 100644
--- a/src/components/vue-ui-parallel-coordinate-plot.vue
+++ b/src/components/vue-ui-parallel-coordinate-plot.vue
@@ -736,7 +736,7 @@ defineExpose({
                 <!-- AXIS NAMES -->
                 <!-- SINGLE LINE -->
                 <text
-                    v-if="!scale.name.includes('\n')"
+                    v-if="!String(scale.name).includes('\n')"
                     data-cy="pcp-axis-label"
                     :x="drawingArea.left + (slot * i) + (slot / 2)"
                     :y="drawingArea.top - 24"
@@ -759,7 +759,7 @@ defineExpose({
                     :font-weight="FINAL_CONFIG.style.chart.yAxis.labels.axisNamesBold ? 'bold' : ''"
                     text-anchor="middle"
                     v-html="createTSpansFromLineBreaksOnX({
-                        content: scale.name,
+                        content: String(scale.name),
                         fontSize: chartDimensions.axisNameFontSize,
                         fill: FINAL_CONFIG.style.chart.yAxis.labels.axisNamesColor,
                         x: drawingArea.left + (slot * i) + (slot / 2),
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index 5093a5bd..ce3afef2 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -1412,7 +1412,7 @@ defineExpose({
                         <g v-for="plot in category.series">
                             <!-- SINGLE LINE -->
                             <text
-                                v-if="!plot.name.includes('\n')"
+                                v-if="!String(plot.name).includes('\n')"
                                 data-cy="plot-label"
                                 :x="plot.x" 
                                 :y="plot.y + FINAL_CONFIG.style.chart.layout.labels.plotLabels.offsetY + FINAL_CONFIG.style.chart.layout.plots.radius" 
@@ -1431,7 +1431,7 @@ defineExpose({
                                 :font-size="FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize / (isZoom ? 1.5 : 1)"
                                 :fill="FINAL_CONFIG.style.chart.layout.labels.plotLabels.color"
                                 v-html="createTSpansFromLineBreaksOnX({
-                                    content: plot.name,
+                                    content: String(plot.name),
                                     fontSize: FINAL_CONFIG.style.chart.layout.labels.plotLabels.fontSize / (isZoom ? 1.5 : 1),
                                     fill: FINAL_CONFIG.style.chart.layout.labels.plotLabels.color,
                                     x: plot.x,
diff --git a/src/components/vue-ui-quick-chart.vue b/src/components/vue-ui-quick-chart.vue
index 72793c4c..feba204e 100644
--- a/src/components/vue-ui-quick-chart.vue
+++ b/src/components/vue-ui-quick-chart.vue
@@ -1362,7 +1362,7 @@ defineExpose({
                         />
                         <g v-if="(!FINAL_CONFIG.xyPeriodsShowOnlyAtModulo || (FINAL_CONFIG.xyPeriodsShowOnlyAtModulo && (i % Math.floor((slicer.end - slicer.start) / FINAL_CONFIG.xyPeriodsModulo) === 0)) || (slicer.end - slicer.start <= FINAL_CONFIG.xyPeriodsModulo))">
                             <text
-                                v-if="!period.includes('\n')"
+                                v-if="!String(period).includes('\n')"
                                 data-cy="period-label"
                                 :font-size="FINAL_CONFIG.xyLabelsXFontSize"
                                 :text-anchor="FINAL_CONFIG.xyPeriodLabelsRotation > 0 ? 'start' : FINAL_CONFIG.xyPeriodLabelsRotation < 0 ? 'end' : 'middle'"
@@ -1379,7 +1379,7 @@ defineExpose({
                                 :fill="FINAL_CONFIG.color"
                                 :transform="`translate(${line.drawingArea.left + (line.slotSize * (i+1)) - (line.slotSize / 2)}, ${line.drawingArea.bottom + FINAL_CONFIG.xyLabelsXFontSize + 6}), rotate(${FINAL_CONFIG.xyPeriodLabelsRotation})`"
                                 v-html="createTSpansFromLineBreaksOnX({
-                                    content: period,
+                                    content: String(period),
                                     fontSize: FINAL_CONFIG.xyLabelsXFontSize,
                                     fill: FINAL_CONFIG.color,
                                     x: 0,
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index 9340a7d3..d8db82e9 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -869,7 +869,7 @@ defineExpose({
                         >
                         <!-- SINGLE LINE -->
                         <text
-                            v-if="!xLabel.label.includes('\n')"
+                            v-if="!String(xLabel.label).includes('\n')"
                             :font-size="FINAL_CONFIG.style.chart.xAxis.labels.fontSize"
                             :fill="FINAL_CONFIG.style.chart.xAxis.labels.color"
                             :font-weight="FINAL_CONFIG.style.chart.xAxis.labels.bold ? 'bold' : 'normal'"
@@ -880,7 +880,7 @@ defineExpose({
                             }">
                             {{ xLabel.label }}
                         </text>
-                        
+
                         <!-- MULTILINE -->
                         <text
                             v-else
@@ -893,7 +893,7 @@ defineExpose({
                                 opacity: selectedX ? selectedX.index === i ? 1 : 0.2 : 1
                             }"
                             v-html="createTSpansFromLineBreaksOnX({
-                                content: xLabel.label,
+                                content: String(xLabel.label),
                                 fontSize: FINAL_CONFIG.style.chart.xAxis.labels.fontSize,
                                 fill: FINAL_CONFIG.style.chart.xAxis.labels.color,
                                 x: 0,
diff --git a/src/components/vue-ui-stackbar.vue b/src/components/vue-ui-stackbar.vue
index cfbef315..49e7604e 100755
--- a/src/components/vue-ui-stackbar.vue
+++ b/src/components/vue-ui-stackbar.vue
@@ -1351,7 +1351,7 @@ defineExpose({
                 <g v-else>
                     <g v-for="(timeLabel, i) in timeLabels">
                         <text
-                            v-if="!timeLabel.text.includes('\n')"
+                            v-if="!String(timeLabel.text).includes('\n')"
                             :key="i"
                             data-cy="time-label"
                             :text-anchor="FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation > 0
@@ -1389,7 +1389,7 @@ defineExpose({
                             `"
                             style="cursor: pointer"
                             v-html="createTSpansFromLineBreaksOnX({
-                                content: timeLabel.text,
+                                content: String(timeLabel.text),
                                 fontSize: FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize,
                                 fill: FINAL_CONFIG.style.chart.grid.x.timeLabels.color,
                                 x: 0,
@@ -1421,7 +1421,7 @@ defineExpose({
                 <g v-else>
                     <g v-for="(timeLabel, i) in timeLabels">
                         <text
-                            v-if="!timeLabel.text.includes('\n')"
+                            v-if="!String(timeLabel.text).includes('\n')"
                             data-cy="time-label"
                             text-anchor="end"
                             :font-size="FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize"
@@ -1448,7 +1448,7 @@ defineExpose({
                             style="cursor: pointer"
                             @click="() => selectTimeLabel(timeLabel, i)"
                             v-html="createTSpansFromLineBreaksOnY({
-                                content: timeLabel.text,
+                                content: String(timeLabel.text),
                                 fontSize: FINAL_CONFIG.style.chart.grid.y.axisLabels.fontSize,
                                 fill: FINAL_CONFIG.style.chart.grid.y.axisLabels.color,
                                 x: drawingArea.left - 8,
diff --git a/src/components/vue-ui-strip-plot.vue b/src/components/vue-ui-strip-plot.vue
index b9fd4205..8e3b1d0c 100644
--- a/src/components/vue-ui-strip-plot.vue
+++ b/src/components/vue-ui-strip-plot.vue
@@ -732,7 +732,7 @@ defineExpose({
                 <g v-for="(label, i) in mutableDataset">
                     <!-- SINGLE LINE -->     
                     <text
-                        v-if="!label.name.includes('\n')"
+                        v-if="!String(label.name).includes('\n')"
                         data-cy="axis-x-label"
                         :x="drawingArea.left + ((i+1) * drawingArea.stripWidth) - drawingArea.stripWidth / 2"
                         :y="drawingArea.bottom + FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize * 2  + FINAL_CONFIG.style.chart.labels.xAxisLabels.offsetY"
@@ -753,7 +753,7 @@ defineExpose({
                         :fill="FINAL_CONFIG.style.chart.labels.xAxisLabels.color"
                         text-anchor="middle"
                         v-html="createTSpansFromLineBreaksOnX({
-                            content: label.name,
+                            content: String(label.name),
                             fontSize: FINAL_CONFIG.style.chart.labels.xAxisLabels.fontSize,
                             fill: FINAL_CONFIG.style.chart.labels.xAxisLabels.color,
                             x: drawingArea.left + ((i+1) * drawingArea.stripWidth) - drawingArea.stripWidth / 2,
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index 0d7eabd1..a7d9c49e 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -1172,7 +1172,7 @@
                             v-if="(label && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && (i === 0 || i === timeLabels.length -1) && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && selectedSerieIndex === i && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo) || (label && !FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyFirstAndLast && FINAL_CONFIG.chart.grid.labels.xAxisLabels.showOnlyAtModulo && (i % Math.floor((this.slicer.end - this.slicer.start) / FINAL_CONFIG.chart.grid.labels.xAxisLabels.modulo) === 0))">
                                 <!-- SINGLE LINE LABEL -->
                                 <text
-                                    v-if="!label.text.includes('\n')"
+                                    v-if="!String(label.text).includes('\n')"
                                     data-cy="time-label"
                                     :text-anchor="FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation > 0 ? 'start' : FINAL_CONFIG.chart.grid.labels.xAxisLabels.rotation < 0 ? 'end' : 'middle'"
                                     :font-size="fontSizes.xAxis"
@@ -1198,7 +1198,7 @@
                                         cursor: usesSelectTimeLabelEvent() ? 'pointer' : 'default'
                                     }"
                                     v-html="createTSpansFromLineBreaksOnX({
-                                        content: label.text,
+                                        content: String(label.text),
                                         fontSize: fontSizes.xAxis,
                                         fill: FINAL_CONFIG.chart.grid.labels.xAxisLabels.color,
                                         x: 0,

From c9f8264cfb03ae29b3693ff66351feb94fe72702 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 9 Jul 2025 15:03:45 +0200
Subject: [PATCH 8/8] 2.14.3-beta.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 61dbb38f..c669c2e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.14.3-beta.0",
+  "version": "2.14.3-beta.1",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.14.3-beta.0",
+      "version": "2.14.3-beta.1",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.0",
diff --git a/package.json b/package.json
index f98e2903..9786f649 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.14.3-beta.0",
+  "version": "2.14.3-beta.1",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [