From 35691f62773828e2d075fdb7b517c7c79b6a6a73 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Fri, 6 Jun 2025 17:53:16 +0200
Subject: [PATCH 01/17] New feature - Add BaseDraggableDialog atom component

---
 src/atoms/BaseDraggableDialog.vue | 316 ++++++++++++++++++++++++++++++
 1 file changed, 316 insertions(+)
 create mode 100644 src/atoms/BaseDraggableDialog.vue

diff --git a/src/atoms/BaseDraggableDialog.vue b/src/atoms/BaseDraggableDialog.vue
new file mode 100644
index 00000000..ba1504d6
--- /dev/null
+++ b/src/atoms/BaseDraggableDialog.vue
@@ -0,0 +1,316 @@
+<script setup>
+import { ref, reactive, computed, defineExpose, onUnmounted, nextTick } from "vue";
+import BaseIcon from "./BaseIcon.vue";
+import { XMLNS } from "../lib";
+
+const props = defineProps({
+    backgroundColor: { type: String },
+    color: { type: String },
+    headerBg: { type: String },
+    headerColor: { type: String }
+});
+
+const emit = defineEmits(["close"]);
+
+const isOpen = ref(false);
+const hasBeenOpened = ref(false);
+
+const modal = reactive({
+    left: window.innerWidth / 2 - 200,
+    top: window.innerHeight / 2 - 120,
+    width: 400,
+    height: 400,
+    dragging: false,
+    resizing: false,
+    dragOffsetX: 0,
+    dragOffsetY: 0,
+    pointerStartX: 0,
+    pointerStartY: 0,
+    resizeStartW: 0,
+    resizeStartH: 0,
+});
+
+function open() {
+    isOpen.value = true;
+    nextTick(() => {
+        if (!hasBeenOpened.value) {
+            modal.left = Math.max(0, window.innerWidth / 2 - modal.width / 2);
+            modal.top = Math.max(0, window.innerHeight / 2 - modal.height / 2);
+            hasBeenOpened.value = true;
+        }
+    });
+}
+function close() {
+    isOpen.value = false;
+    emit("close");
+}
+
+defineExpose({ open, close });
+
+const modalStyle = computed(() => ({
+    position: "fixed",
+    left: `${modal.left}px`,
+    top: `${modal.top}px`,
+    width: `${modal.width}px`,
+    height: `${modal.height}px`,
+    padding: 0,
+    border: "none",
+    background: props.backgroundColor,
+    boxShadow: "0 4px 24px rgba(0,0,0,0.15)",
+    zIndex: 9999,
+    overflow: "visible",
+    borderRadius: "2px"
+}));
+
+function getPointer(e) {
+    if (e.touches && e.touches.length) {
+        return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+    }
+    return { x: e.clientX, y: e.clientY };
+}
+
+function initDrag(e) {
+    e.preventDefault?.();
+    modal.dragging = true;
+    const pointer = getPointer(e);
+    modal.dragOffsetX = pointer.x - modal.left;
+    modal.dragOffsetY = pointer.y - modal.top;
+    document.addEventListener("mousemove", drag);
+    document.addEventListener("mouseup", endDrag);
+    document.addEventListener("touchmove", drag, { passive: false });
+    document.addEventListener("touchend", endDrag);
+}
+
+function drag(e) {
+    if (!modal.dragging) return;
+    e.preventDefault?.();
+    const pointer = getPointer(e);
+    let newLeft = pointer.x - modal.dragOffsetX;
+    let newTop = pointer.y - modal.dragOffsetY;
+    newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - modal.width));
+    newTop = Math.max(0, Math.min(newTop, window.innerHeight - modal.height));
+    modal.left = newLeft;
+    modal.top = newTop;
+}
+
+function endDrag() {
+    modal.dragging = false;
+    document.removeEventListener("mousemove", drag);
+    document.removeEventListener("mouseup", endDrag);
+    document.removeEventListener("touchmove", drag);
+    document.removeEventListener("touchend", endDrag);
+}
+
+function initResize(e) {
+    e.preventDefault?.();
+    modal.resizing = true;
+    const pointer = getPointer(e);
+    modal.pointerStartX = pointer.x;
+    modal.pointerStartY = pointer.y;
+    modal.resizeStartW = modal.width;
+    modal.resizeStartH = modal.height;
+    document.addEventListener("mousemove", resize);
+    document.addEventListener("mouseup", endResize);
+    document.addEventListener("touchmove", resize, { passive: false });
+    document.addEventListener("touchend", endResize);
+}
+
+function resize(e) {
+    if (!modal.resizing) return;
+    e.preventDefault?.();
+    const pointer = getPointer(e);
+    let dx = pointer.x - modal.pointerStartX;
+    let dy = pointer.y - modal.pointerStartY;
+    modal.width = Math.max(240, modal.resizeStartW + dx);
+    modal.height = Math.max(400, modal.resizeStartH + dy);
+}
+
+function endResize() {
+    modal.resizing = false;
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", endResize);
+    document.removeEventListener("touchmove", resize);
+    document.removeEventListener("touchend", endResize);
+}
+
+function initResizeLeft(e) {
+    e.preventDefault?.();
+    modal.resizing = true;
+    const pointer = getPointer(e);
+    modal.pointerStartX = pointer.x;
+    modal.pointerStartY = pointer.y;
+    modal.resizeStartW = modal.width;
+    modal.resizeStartH = modal.height;
+    modal.resizeStartLeft = modal.left;
+    modal.resizeStartTop = modal.top;
+    document.addEventListener("mousemove", resizeLeft);
+    document.addEventListener("mouseup", endResizeLeft);
+    document.addEventListener("touchmove", resizeLeft, { passive: false });
+    document.addEventListener("touchend", endResizeLeft);
+}
+
+function resizeLeft(e) {
+    if (!modal.resizing) return;
+    e.preventDefault?.();
+    const pointer = getPointer(e);
+    let dx = pointer.x - modal.pointerStartX;
+    let newLeft = Math.min(
+        Math.max(0, modal.resizeStartLeft + dx),
+        modal.resizeStartLeft + modal.resizeStartW - 240 // min width
+    );
+    let newWidth = modal.resizeStartW - (newLeft - modal.resizeStartLeft);
+    let dy = pointer.y - modal.pointerStartY;
+    let newHeight = Math.max(400, modal.resizeStartH + dy);
+    modal.left = newLeft;
+    modal.width = newWidth;
+    modal.height = newHeight;
+}
+
+function endResizeLeft() {
+    modal.resizing = false;
+    document.removeEventListener("mousemove", resizeLeft);
+    document.removeEventListener("mouseup", endResizeLeft);
+    document.removeEventListener("touchmove", resizeLeft);
+    document.removeEventListener("touchend", endResizeLeft);
+}
+
+onUnmounted(() => {
+    endDrag();
+    endResize();
+    endResizeLeft();
+});
+</script>
+
+<template>
+    <Teleport to="body">
+        <div v-if="isOpen" class="modal vue-ui-draggable-dialog" :style="modalStyle" @click.stop>
+            <div class="modal-header" :style="{
+                backgroundColor: headerBg,
+                color: headerColor
+            }">
+                <span class="drag-handle" @mousedown.stop.prevent="initDrag" @touchstart.stop.prevent="initDrag">
+                    <svg
+                        :xmlns="XMLNS"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path d="M5 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                        <path d="M5 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                        <path d="M12 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                        <path d="M12 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                        <path d="M19 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                        <path d="M19 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                    </svg>
+
+
+                </span>
+                <span class="modal-title">
+                    <slot name="title"/>
+                </span>
+                <button class="close" @click="close">
+                    <BaseIcon name="close" :stroke="headerColor"/>
+                </button>
+            </div>
+            <div class="modal-body">
+                <slot />
+            </div>
+            <div class="resize-handle" @mousedown.stop.prevent="initResize" @touchstart.stop.prevent="initResize" />
+            <div
+                class="resize-handle resize-handle-left"
+                @mousedown.stop.prevent="initResizeLeft"
+                @touchstart.stop.prevent="initResizeLeft"
+            />
+        </div>
+    </Teleport>
+</template>
+
+<style scoped>
+.modal-header {
+    display: flex;
+    align-items: center;
+    user-select: none;
+    padding: 0.5em 0 0.5em 0.5em;
+    border-radius: 2px 2px 0 0;
+    position: relative;
+}
+
+.drag-handle {
+    display: flex;
+    align-items: center;
+    cursor: grab;
+    margin-right: 0.5em;
+    padding: 0.2em;
+}
+
+.drag-handle:active {
+    cursor: grabbing;
+}
+
+.modal-title {
+    flex: 1;
+    font-weight: bold;
+}
+
+.close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items:center;
+    justify-content: center;
+}
+
+.modal-body {
+    width: 100%;
+    height: 80%;
+    transition: all 0.2s ease-in-out;
+}
+
+.resize-handle {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: nwse-resize;
+    z-index: 1;
+    background: transparent;
+}
+
+.resize-handle:after {
+    content: '';
+    display: block;
+    width: 14px;
+    height: 14px;
+    border-right: 2px solid v-bind(color);
+    border-bottom: 2px solid v-bind(color);
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    border-radius: 2px;
+}
+
+.resize-handle-left {
+    left: 0;
+    cursor: nesw-resize;
+}
+.resize-handle-left:after {
+    content: '';
+    display: block;
+    width: 14px;
+    height: 14px;
+    border-right: 0px solid transparent;
+    border-left: 2px solid v-bind(color);
+    border-bottom: 2px solid v-bind(color);
+    position: absolute;
+    left: 3px;
+    bottom: 3px;
+    border-radius: 2px;
+}
+</style>

From af2086fac808e277f0bf8f3053592d5efa3089da Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 11:46:09 +0200
Subject: [PATCH 02/17] New feature - Add VueUiRidgeline component

---
 README.md                            |   18 +-
 TestingArena/ArenaVueUiIcon.vue      |    2 +-
 TestingArena/ArenaVueUiRidgeline.vue |  207 +++++
 cypress/fixtures/vdui-components.js  |  331 ++++++++
 documentation/installation.md        |    3 +-
 package.json                         |    2 +-
 src/App.vue                          |    7 +-
 src/TestingArena.vue                 |    5 +-
 src/atoms/BaseIcon.vue               |    4 +-
 src/components/vue-data-ui.vue       |    6 +-
 src/components/vue-ui-ridgeline.vue  | 1081 ++++++++++++++++++++++++++
 src/components/vue-ui-skeleton.vue   |   26 +
 src/index.js                         |    1 +
 src/lib.js                           |   16 +-
 src/main.js                          |    4 +-
 src/themes.json                      |  732 +++++++++++++++++
 src/useConfig.js                     |  157 ++++
 types/vue-data-ui.d.ts               |  146 +++-
 18 files changed, 2723 insertions(+), 25 deletions(-)
 create mode 100644 TestingArena/ArenaVueUiRidgeline.vue
 create mode 100644 src/components/vue-ui-ridgeline.vue

diff --git a/README.md b/README.md
index 94c2d8d6..db482124 100755
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 # vue-data-ui
 
 [![npm](https://img.shields.io/npm/v/vue-data-ui)](https://github.com/graphieros/vue-data-ui)
-[![Static Badge](https://img.shields.io/badge/components-61-blue)](https://github.com/graphieros/vue-data-ui)
+[![Static Badge](https://img.shields.io/badge/components-62-blue)](https://github.com/graphieros/vue-data-ui)
 [![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)](https://github.com/graphieros/vue-data-ui/issues)
 [![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/graphieros/vue-data-ui?tab=MIT-1-ov-file#readme)
 [![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4526-shield.svg)](https://madewithvuejs.com/p/vue-data-ui/shield-link)
@@ -43,6 +43,7 @@ Available components
 - [VueUiQuickChart](https://vue-data-ui.graphieros.com/docs#vue-ui-quick-chart)
 - [VueUiRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-radar)
 - [VueUiRelationCircle](https://vue-data-ui.graphieros.com/docs#vue-ui-relation-circle)
+- [VueUiRidgeline](https://vue-data-ui.graphieros.com/docs#vue-ui-ridgeline)
 - [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings)
 - [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter)
 - [VueUiStackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-stackbar)
@@ -427,8 +428,8 @@ From the dataset you pass into the props, this component will produce the most a
 | ----------------------------- | ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ |
 | `VueUiAgePyramid`             | `Array<Array<string / number>>`            | `VueUiSparklineConfig`              | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`                                                                                            | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`                                                             | ✅             | ✅     |
 | `VueUiCandlestick`            | `Array<Array<string / number>>`            | `VueUiCandlestickConfig`            | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`                                                                                            | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background`                                            | ✅             | ✅     |
-| `VueUiCirclePack`             | `VueUiCirclePackDatasetItem[]`             | `VueUiCirclePackConfig`             | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`                                                                              | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label`                                                       | ✅             | ✅     |
 | `VueUiChestnut`               | `VueUiChestnutDatasetRoot[]`               | `VueUiChestnutConfig`               | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`                                                    | `#svg`, `#legend`, `#watermark`, `#chart-background`                                                                                                  | ❌             | ✅     |
+| `VueUiCirclePack`             | `VueUiCirclePackDatasetItem[]`             | `VueUiCirclePackConfig`             | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`                                                                              | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label`                                                       | ✅             | ✅     |
 | `VueUiDonutEvolution`         | `VueUiDonutEvolutionDatasetItem[]`         | `VueUiDonutEvolutionConfig`         | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`                                                                                 | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background`                                                                                 | ❌             | ✅     |
 | `VueUiDonut`                  | `VueUiDonutDatasetItem[]`                  | `VueUiDonutConfig`                  | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`                            | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern`                  | ✅             | ✅     |
 | `VueUiDumbbell`               | `VueUiDumbbellDataset[]`                   | `VueUiDumbbellConfig`               | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`                                                                                                  | `#svg`, `#legend`, `#watermark`, `#chart-background`                                                                                                  | ❌             | ✅     |
@@ -445,6 +446,7 @@ From the dataset you pass into the props, this component will produce the most a
 | `VueUiParallelCoordinatePlot` | `VueUiParallelCoordinatePlotDatasetItem[]` | `VueUiParallelCoordinatePlotConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`                            | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`                                            | ✅             | ✅     |
 | `VueUiQuadrant`               | `VueUiQuadrantDatasetItem[]`               | `VueUiQuadrantConfig`               | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`                  | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`                                                             | ✅             | ✅     |
 | `VueUiRadar`                  | `VueUiRadarDataset`                        | `VueUiRadarConfig`                  | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`                                                                | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`                                                             | ✅             | ✅     |
+| `VueUiRidgeline`              | `VueUiRidgelineDatasetItem[]`              | `VueUiRidgelineConfig`              | `@selectLegend`, `@selectX`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`                                                 | `#svg`, `#legend`, `#time-label`,`#watermark`, `#chart-background`, `#pattern`                                                                        | ❌             | ✅     |
 | `VueUiRings`                  | `VueUiRingsDatasetItem[]`                  | `VueUiRingsConfig`                  | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`                                                                | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern`                                                 | ✅             | ✅     |
 | `VueUiScatter`                | `VueUiScatterDatasetItem[]`                | `VueUiScatterConfig`                | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`                                                                                 | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`                                                             | ✅             | ✅     |
 | `VueUiStackbar`               | `VueUiStackbarDatasetItem[]`               | `VueUiStackbarConfig`               | `@selectLegend`, `@selectDatapoint`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`        | `#svg`, `#legend`, `#time-label`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background`, `#pattern`                 | ✅             | ✅     |
@@ -600,6 +602,7 @@ User options actions available per chart:
 | VueUiQuickChart             | optionTooltip, optionPdf, optionImg, optionFullscreen, optionAnnotator                                                    |
 | VueUiRadar                  | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                            |
 | VueUiRelationCircle         | optionPdf, optionImg, optionFullscreen, optionAnnotator                                                                   |
+| VueUiRidgeline              | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                                           |
 | VueUiRings                  | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                            |
 | VueUiScatter                | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                            |
 | VueUiSparkHistogram         | (no user options menu)                                                                                                    |
@@ -619,9 +622,9 @@ User options actions available per chart:
 | VueUiWaffle                 | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                            |
 | VueUiWheel                  | optionPdf, optionImg, optionFullscreen, optionAnnotator                                                                   |
 | VueUiWordCloud              | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                                           |
+| VueUiWorld                  | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                            |
 | VueUiXy                     | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator |
 | VueUiXyCanvas               | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator |
-| VueUiWorld                  | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator                            |
 
 User options menu icon can be customized using the #menuIcon slot:
 
@@ -652,6 +655,7 @@ It is possible to provide a custom palette in the config prop through config.cus
 - VueUiQuickChart
 - VueUiRadar
 - VueUiRelationCircle
+- VueUiRidgeline
 - VueUiRings
 - VueUiScatter
 - VueUiSparkStackbar
@@ -664,9 +668,9 @@ It is possible to provide a custom palette in the config prop through config.cus
 - VueUiVerticalBar
 - VueUiWaffle
 - VueUiWordCloud
+- VueUiWorld
 - VueUiXy
 - VueUiXyCanvas
-- VueUiWorld
 
 If the array of colors provided in customPalette is too small for the dataset, remaining colors will be computed from the default internal palette.
 Accepted color formats: HEX, RGB, HSL, named colors.
@@ -703,6 +707,7 @@ However the folowing charts can be made fully responsive, making them better to
 | VueUiQuickChart             | ✅                             |
 | VueUiRadar                  | ✅                             |
 | VueUiRelationCircle         | ✅                             |
+| VueUiRidgeline              | ✅                             |
 | VueUiRings                  | ✅                             |
 | VueUiScatter                | ✅                             |
 | VueUiSparkHistogram         | -                              |
@@ -723,9 +728,9 @@ However the folowing charts can be made fully responsive, making them better to
 | VueUiWaffle                 | ✅                             |
 | VueUiWheel                  | ✅                             |
 | VueUiWordCloud              | ✅                             |
+| VueUiWorld                  | -                              |
 | VueUiXy                     | ✅                             |
 | VueUiXyCanvas               | ✅                             |
-| VueUiWorld                  | -                              |
 
 To activate responsiveness, set the config.responsive attribute to true:
 
@@ -822,12 +827,13 @@ The #pattern slot is available on the following components:
 - VueUiCirclePack
 - VueUiDonut
 - VueUiGauge
+- VueUiRidgeline
 - VueUiRings
 - VueUiStackbar
 - VueUiVerticalBar
 - VueUiWaffle
-- VueUiXy
 - VueUiWorld
+- VueUiXy
 
 A set of 12 readymade patterns are available through the VueUiPattern component:
 
diff --git a/TestingArena/ArenaVueUiIcon.vue b/TestingArena/ArenaVueUiIcon.vue
index f27b5d66..2255082e 100644
--- a/TestingArena/ArenaVueUiIcon.vue
+++ b/TestingArena/ArenaVueUiIcon.vue
@@ -3,7 +3,7 @@ import { ref } from "vue";
 import BaseIcon from "./../src/atoms/BaseIcon.vue";
 
 const icons = ref([
-    "annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world",
+    "annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline"
 ])
 
 </script>
diff --git a/TestingArena/ArenaVueUiRidgeline.vue b/TestingArena/ArenaVueUiRidgeline.vue
new file mode 100644
index 00000000..7f7ca802
--- /dev/null
+++ b/TestingArena/ArenaVueUiRidgeline.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import LocalVueUiRidgeLine from '../src/components/vue-ui-ridgeline.vue';
+import LocalVueDataUi from '../src/components/vue-data-ui.vue';
+import Box from "./Box.vue";
+import convertArrayToObject from "./convertModel";
+
+const themeOptions = ref([
+    "",
+    "hack",
+    "zen",
+    "concrete",
+    "default",
+    "celebration",
+    "celebrationNight"
+])
+
+const currentTheme = ref(themeOptions.value[0])
+
+function makeDs(n) {
+    let arr = [];
+    for (let i = 0; i < n; i += 1) {
+        arr.push(Math.random() * (Math.random() > 0 ? 100 : -100) * i)
+    }
+    return arr;
+}
+
+function makeDataset(n) {
+    let arr = []
+    for (let i = 0; i < n; i += 1) {
+        arr.push({
+            name: `Serie ${i}`,
+            datapoints: [
+                {
+                    name: 'Variable 1',
+                    values: makeDs(24),
+                    color: 'red'
+                },
+                {
+                    name: 'Variable 2',
+                    values: makeDs(24),
+                    color: 'blue'
+                }
+            ]
+        })
+    }
+    return arr;
+}
+
+const dataset = ref(makeDataset(5));
+
+const model = ref([
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
+
+    { key: 'style.chart.padding.top', def: 0, type: 'number'},
+    { key: "style.chart.padding.right", def: 0, type: 'number'},
+    { key: 'style.chart.padding.bottom', def: 64, type: 'number'},
+    { key: 'style.chart.padding.left', def: 0, type: 'number'},
+
+    { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
+    { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
+    { key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48 },
+    { key: 'style.chart.title.bold', def: true, type: 'checkbox'},
+    { key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
+    { key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet'},
+    { key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
+    { key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
+
+    { key: 'style.chart.dialog.show', def: true, type: 'checkbox'},
+    { key: 'style.chart.dialog.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.dialog.color', def: '#1A1A1A', type: 'color'},
+    { key: 'style.chart.dialog.header.backgroundColor', def: '#E1E5E8', type: 'color'},
+    { key: 'style.chart.dialog.header.color', def: '#1A1A1A', type: 'color'},
+
+    { key: 'style.chart.areas.height', def: 60, type: 'number', min: 30, max: 100, step: 10},
+    { key: 'style.chart.areas.rowHeight', def: 30, type: 'number', min: 10, max: 100, step: 10},
+    { key: 'style.chart.areas.strokeWidth', def: 1, type: 'number', min: 0, max: 12 },
+    { key: 'style.chart.areas.stroke.useSerieColor', def: false, type: 'checkbox'},
+    { key: 'style.chart.areas.stroke.color', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.areas.smooth', def: true, type: 'checkbox'},
+    { key: 'style.chart.areas.opacity', def: 0.9, min: 0.1, max: 1, step: 0.01, type: 'number'},
+    
+    { key: 'style.chart.areas.maxPoint.show', def: true, type: 'checkbox'},
+    { key: 'style.chart.areas.maxPoint.adaptStrokeToBackground', def: true, type: 'checkbox'},
+    { key: 'style.chart.areas.maxPoint.stroke', def: '#1A1A1A', type: 'color'},
+    { key: 'style.chart.areas.maxPoint.strokeWidth', def: 1, type: 'number', min: 0, max: 12, step: 0.1},
+    { key: 'style.chart.areas.maxPoint.strokeDasharray', def: 4, type: 'number', min: 0, max: 12 },
+
+    { key: 'style.chart.selector.show', def: true, type: 'checkbox'},
+    { key: 'style.chart.selector.stroke', def: '#CCCCCC', type: 'color'},
+    { key: 'style.chart.selector.strokeWidth', def: 1, type: 'number', min: 0, max: 42},
+    { key: 'style.chart.selector.strokeDasharray', def: 2, type: 'number', min: 0, max: 12},
+    { key: 'style.chart.selector.labels.fontSize', def: 12, type: 'number', min: 6, max: 48},
+    { key: 'style.chart.selector.labels.rounding', def: 0, type: 'number', min: 0, max: 6},
+    { key: 'style.chart.selector.labels.color', def: '#1A1A1A', type: 'color'},
+    { key: 'style.chart.selector.dot.radius', def: 4, type: 'range', min: 0, max: 12},
+    { key: 'style.chart.selector.dot.useDatapointColor', def: true, type: 'checkbox'},
+    { key: 'style.chart.selector.dot.fill', def: '#CCCCCC', type: 'color'},
+    { key: 'style.chart.selector.dot.stroke', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.selector.dot.strokeWidth', def: 0.5, step: 0.1, type:'number', min: 0, max: 12},
+
+    { key: 'style.chart.zeroLine.show', def: true, type: 'checkbox'},
+    { key: 'style.chart.zeroLine.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
+    { key: 'style.chart.zeroLine.strokeDasharray', def: 0, type: 'number', min: 0, max: 12},
+    { key: 'style.chart.zeroLine.useSerieColor', def: false, type: 'checkbox'},
+    { key: 'style.chart.zeroLine.stroke', def: '#CCCCCC', type: 'color'},
+
+    { key: 'style.chart.xAxis.labels.prefix', def: '', type: 'text'},
+    { key: 'style.chart.xAxis.labels.suffix', def: '', type: 'text'},
+    { key: 'style.chart.xAxis.labels.rotation', def: -30, type: 'number'},
+    { key: 'style.chart.xAxis.labels.color', def: '#1A1A1A', type: 'color'},
+    { key: 'style.chart.xAxis.labels.fontSize', def: 14, type: 'number', min: 8, max: 48},
+    { key: 'style.chart.xAxis.labels.bold', def: false, type: 'checkbox'},
+    { key: 'style.chart.xAxis.labels.showOnlyAtModulo', def: true, type: 'checkbox'},
+    { key: 'style.chart.xAxis.labels.modulo', def: 12, type: 'number'},
+    { key: 'style.chart.xAxis.labels.offsetY', def: 0, type: 'number', min: -100, max: 100},
+
+    { key: 'style.chart.yAxis.labels.fontSize', def: 16, type: 'number', min: 8, max: 48},
+    { key: 'style.chart.yAxis.labels.bold', def: false, type: 'checkbox'},
+    { key: 'style.chart.yAxis.labels.color', def: '#1A1A1A', type: 'color'},
+    { key: 'style.chart.yAxis.labels.offsetX', def: 0, type: 'number', min: -100, max: 100}
+])
+
+const config = computed(() => {
+    const c = convertArrayToObject(model.value);
+    return {
+        ...c,
+        theme: currentTheme.value,
+        style: {
+            ...c.style,
+            chart: {
+                ...c.style.chart,
+                xAxis: {
+                    ...c.style.chart.xAxis,
+                    labels: {
+                        ...c.style.chart.xAxis.labels,
+                        values: dataset.value[0].datapoints[0].values.map((dp, i) => {
+                            return `YYYY-MM-DD ${i}`
+                        })
+                    }
+                }
+            }
+        }
+    }
+});
+
+</script>
+
+<template>
+    <div style="margin: 12px 0; color: white">
+        Theme:
+        <select v-model="currentTheme" @change="step += 1">
+            <option v-for="opt in themeOptions">{{ opt }}</option>
+        </select>
+    </div>
+
+    <div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
+        <LocalVueUiRidgeLine
+            :dataset="dataset"
+            :config="{
+                ...config,
+                responsive: true
+            }"
+        />
+    </div>
+    <Box>
+        <template #title>VueUiRidgeline</template>
+
+        <template #local>
+            <LocalVueUiRidgeLine :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #VDUI-local>
+            <LocalVueDataUi component="VueUiRidgeline" :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #build>
+            <VueUiRidgeline :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #VDUI-build>
+            <VueDataUi component="VueUiRidgeline" :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #knobs>
+            <div
+                style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
+                <div v-for="knob in model">
+                    <label style="font-size: 10px">{{ knob.key }}</label>
+                    <div
+                        style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
+                        <input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
+                            :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
+                        <select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
+                            <option v-for="opt in knob.options">{{ opt }}</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <template #config>
+            {{ config }}
+        </template>
+    </Box>
+</template>
\ No newline at end of file
diff --git a/cypress/fixtures/vdui-components.js b/cypress/fixtures/vdui-components.js
index 197c968e..04dedfd7 100644
--- a/cypress/fixtures/vdui-components.js
+++ b/cypress/fixtures/vdui-components.js
@@ -5,6 +5,337 @@
  *
  */
 export const components = [
+    {
+        name: 'VueUiRidgeline',
+        dataset: [
+            {
+                "name": "Serie 0",
+                "datapoints": [
+                    {
+                        "name": "Variable 1",
+                        "values": [
+                            0,
+                            39.19772731440935,
+                            98.46485775929364,
+                            114.1908949057329,
+                            291.4884910336525,
+                            183.09090011896896,
+                            185.17193297940813,
+                            87.11985921912097,
+                            591.7728339449,
+                            64.18309645967346,
+                            107.88366917119507,
+                            782.9295340246069,
+                            348.5099161382734,
+                            990.367404438023,
+                            329.02212144414676,
+                            1424.4185279090398,
+                            1494.0572685328514,
+                            1336.717982199592,
+                            1796.4333568263096,
+                            442.9945458979909,
+                            396.8189640396176,
+                            1932.3494435569128,
+                            1970.748871336182,
+                            108.11006667003626
+                        ],
+                        "color": "red"
+                    },
+                    {
+                        "name": "Variable 2",
+                        "values": [
+                            0,
+                            44.28146601852738,
+                            67.37504011659918,
+                            55.07512871419623,
+                            331.94363912799696,
+                            205.2717957693323,
+                            282.584906104573,
+                            178.3395950868987,
+                            322.35289229262804,
+                            335.30041398936856,
+                            889.9567716077663,
+                            818.1069205895715,
+                            278.6338830796641,
+                            879.3179399919828,
+                            1390.5780165869562,
+                            4.786267480583528,
+                            1032.9603277271387,
+                            226.90514191090506,
+                            112.6167852067102,
+                            1543.8043747859083,
+                            367.1148104592348,
+                            1299.3478064051128,
+                            312.7703389394627,
+                            1022.2306667527763
+                        ],
+                        "color": "blue"
+                    }
+                ]
+            },
+            {
+                "name": "Serie 1",
+                "datapoints": [
+                    {
+                        "name": "Variable 1",
+                        "values": [
+                            0,
+                            81.26281105289809,
+                            76.33258947423916,
+                            274.6970952998332,
+                            219.45589214138522,
+                            249.19606094147105,
+                            166.9312821503948,
+                            205.25199402219081,
+                            171.45141282343258,
+                            64.27950413815766,
+                            287.6927347508198,
+                            831.609590191458,
+                            348.68246685227905,
+                            986.0637489050416,
+                            53.78701016431815,
+                            942.4682172031519,
+                            1169.6517126157971,
+                            1336.7051626907864,
+                            1510.938463185112,
+                            1810.7169843571903,
+                            1850.522981210778,
+                            861.6668085910355,
+                            1678.2914654443643,
+                            207.0456193192308
+                        ],
+                        "color": "red"
+                    },
+                    {
+                        "name": "Variable 2",
+                        "values": [
+                            0,
+                            85.35017895751969,
+                            64.08725288435046,
+                            62.091025438107586,
+                            170.95211279529136,
+                            298.12890093762,
+                            582.5960170052857,
+                            323.7189844880279,
+                            423.3506893849237,
+                            657.7001341358781,
+                            2.713954614031233,
+                            545.3087975091396,
+                            702.8615391951712,
+                            1033.3368790313962,
+                            908.8960310962362,
+                            62.66515263811101,
+                            673.0306750619106,
+                            184.86208038155638,
+                            1778.1388015007842,
+                            1802.2472242484766,
+                            812.5519521448052,
+                            1349.9104953715068,
+                            66.90846629013478,
+                            1426.911956876513
+                        ],
+                        "color": "blue"
+                    }
+                ]
+            },
+            {
+                "name": "Serie 2",
+                "datapoints": [
+                    {
+                        "name": "Variable 1",
+                        "values": [
+                            0,
+                            42.06495350648653,
+                            101.05869353465988,
+                            92.26302174995948,
+                            338.339203409907,
+                            1.2519596078831574,
+                            49.23995234368907,
+                            211.57351500184689,
+                            159.65108921874344,
+                            570.1116114115667,
+                            346.6598468204859,
+                            630.6436806341121,
+                            156.44168932078162,
+                            923.0391830068639,
+                            1148.5210079019737,
+                            1262.9079000859829,
+                            969.3634133802377,
+                            1464.3206563866524,
+                            1255.7719733646056,
+                            379.28845055207273,
+                            216.45101834516,
+                            529.3271202937832,
+                            1457.64507072256,
+                            86.95381633180313
+                        ],
+                        "color": "red"
+                    },
+                    {
+                        "name": "Variable 2",
+                        "values": [
+                            0,
+                            75.89764669639099,
+                            84.19555235584355,
+                            11.373496883283252,
+                            9.575847679604221,
+                            133.96807445237573,
+                            302.19026132150134,
+                            628.9975382290132,
+                            641.8645590311042,
+                            456.38767540133176,
+                            478.4708811906736,
+                            805.3178498540375,
+                            112.26010442944207,
+                            342.94805727234177,
+                            128.89272912435382,
+                            284.3659595114697,
+                            1036.2780931807931,
+                            942.0189318077448,
+                            89.6166330908573,
+                            288.5635185961303,
+                            1568.2565253828009,
+                            775.6097202584252,
+                            767.858618801546,
+                            991.1162549165539
+                        ],
+                        "color": "blue"
+                    }
+                ]
+            },
+            {
+                "name": "Serie 3",
+                "datapoints": [
+                    {
+                        "name": "Variable 1",
+                        "values": [
+                            0,
+                            87.24083602248358,
+                            141.66207325395308,
+                            97.87958554535791,
+                            355.7165643729727,
+                            384.23318330720434,
+                            193.29236660309817,
+                            252.59887581113153,
+                            67.14746184735034,
+                            29.9638143757347,
+                            853.9898275161722,
+                            23.30862036523512,
+                            428.2673683813208,
+                            808.3043198982095,
+                            1198.4948642594736,
+                            983.648296520586,
+                            1262.3626148854303,
+                            831.0685221455387,
+                            131.09006051137538,
+                            1247.7148875175803,
+                            1046.6923207120324,
+                            1765.842459103364,
+                            1464.5035046557557,
+                            937.9409805898772
+                        ],
+                        "color": "red"
+                    },
+                    {
+                        "name": "Variable 2",
+                        "values": [
+                            0,
+                            64.34514261558455,
+                            29.13571211794781,
+                            178.79816094275048,
+                            100.71693832818282,
+                            266.35484486351186,
+                            282.8546319898203,
+                            28.58624741203537,
+                            763.8857936170537,
+                            545.4865906731147,
+                            138.9520190122242,
+                            52.01382521803767,
+                            708.2681786588348,
+                            1000.3653557754008,
+                            669.0108269551466,
+                            1370.7718714060359,
+                            341.72834085520094,
+                            1338.4882311049869,
+                            1465.7838932875347,
+                            525.4626497552898,
+                            1328.2452503957193,
+                            92.92077419969087,
+                            1637.2865575361195,
+                            2171.208978748257
+                        ],
+                        "color": "blue"
+                    }
+                ]
+            },
+            {
+                "name": "Serie 4",
+                "datapoints": [
+                    {
+                        "name": "Variable 1",
+                        "values": [
+                            0,
+                            60.61521289241186,
+                            16.305592075492847,
+                            48.363055591540125,
+                            27.23026432694504,
+                            488.4123140883341,
+                            174.32399354720604,
+                            240.55844159317647,
+                            187.37484171298843,
+                            859.8358961146381,
+                            558.1527968699315,
+                            467.2840262018397,
+                            346.919280538702,
+                            57.887086544607634,
+                            600.6056861452856,
+                            1185.5149990254702,
+                            1594.4271139452926,
+                            75.36324238159816,
+                            1013.3531929981647,
+                            588.1040889224212,
+                            1484.0653649985697,
+                            1168.6542487499353,
+                            378.0462125683915,
+                            2173.718882255563
+                        ],
+                        "color": "red"
+                    },
+                    {
+                        "name": "Variable 2",
+                        "values": [
+                            0,
+                            84.406644328534,
+                            37.35484914225673,
+                            67.52974005282377,
+                            137.33202552693209,
+                            365.77773290860466,
+                            33.39401198239542,
+                            189.25930454036668,
+                            101.64234806124375,
+                            168.33191271908987,
+                            68.24045476954255,
+                            392.56707245713505,
+                            25.076333442604337,
+                            511.44496577175147,
+                            1399.8223552541983,
+                            885.1608154526058,
+                            1183.3970451328325,
+                            601.923954269416,
+                            569.5347561506143,
+                            692.6873174187882,
+                            2.866047553335749,
+                            694.8270438153173,
+                            979.5776938575823,
+                            1090.9870382987206
+                        ],
+                        "color": "blue"
+                    }
+                ]
+            }
+        ],
+        wrapperClass: '.vue-ui-ridgeline'
+    },
     {
         name: "VueUiWorld",
         dataset: { FRA: { value: 100 }},
diff --git a/documentation/installation.md b/documentation/installation.md
index 6b84cc5d..92a2bd0f 100755
--- a/documentation/installation.md
+++ b/documentation/installation.md
@@ -146,8 +146,8 @@ From the dataset you pass into the props, this component will produce the most a
 | ----------------------------- | ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ |
 | `VueUiAgePyramid`             | `Array<Array<string / number>>`            | `VueUiSparklineConfig`              | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`                                                                                            | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`                                                             | ✅             | ✅     |
 | `VueUiCandlestick`            | `Array<Array<string / number>>`            | `VueUiCandlestickConfig`            | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`                                                                                            | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background`                                            | ✅             | ✅     |
-| `VueUiCirclePack`             | `VueUiCirclePackDatasetItem[]`             | `VueUiCirclePackConfig`             | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`                                                                              | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label`                                                       | ✅             | ✅     |
 | `VueUiChestnut`               | `VueUiChestnutDatasetRoot[]`               | `VueUiChestnutConfig`               | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`                                                    | `#svg`, `#legend`, `#watermark`, `#chart-background`                                                                                                  | ❌             | ✅     |
+| `VueUiCirclePack`             | `VueUiCirclePackDatasetItem[]`             | `VueUiCirclePackConfig`             | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`                                                                              | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label`                                                       | ✅             | ✅     |
 | `VueUiDonutEvolution`         | `VueUiDonutEvolutionDatasetItem[]`         | `VueUiDonutEvolutionConfig`         | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`                                                                                 | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background`                                                                                 | ❌             | ✅     |
 | `VueUiDonut`                  | `VueUiDonutDatasetItem[]`                  | `VueUiDonutConfig`                  | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`                            | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern`                  | ✅             | ✅     |
 | `VueUiDumbbell`               | `VueUiDumbbellDataset[]`                   | `VueUiDumbbellConfig`               | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`                                                                                                  | `#svg`, `#legend`, `#watermark`, `#chart-background`                                                                                                  | ❌             | ✅     |
@@ -164,6 +164,7 @@ From the dataset you pass into the props, this component will produce the most a
 | `VueUiParallelCoordinatePlot` | `VueUiParallelCoordinatePlotDatasetItem[]` | `VueUiParallelCoordinatePlotConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`                            | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`                                            | ✅             | ✅     |
 | `VueUiQuadrant`               | `VueUiQuadrantDatasetItem[]`               | `VueUiQuadrantConfig`               | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`                  | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`                                                             | ✅             | ✅     |
 | `VueUiRadar`                  | `VueUiRadarDataset`                        | `VueUiRadarConfig`                  | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`                                                                | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`                                                             | ✅             | ✅     |
+| `VueUiRidgeline`              | `VueUiRidgelineDatasetItem[]`              | `VueUiRidgelineConfig`              | `@selectLegend`, `@selectX`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`                                                 | `#svg`, `#legend`, `#time-label`,`#watermark`, `#chart-background`, `#pattern`                                                                        | ❌             | ✅     |
 | `VueUiRings`                  | `VueUiRingsDatasetItem[]`                  | `VueUiRingsConfig`                  | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`                                                                | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern`                                                 | ✅             | ✅     |
 | `VueUiScatter`                | `VueUiScatterDatasetItem[]`                | `VueUiScatterConfig`                | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`                                                                                 | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`                                                             | ✅             | ✅     |
 | `VueUiStackbar`               | `VueUiStackbarDatasetItem[]`               | `VueUiStackbarConfig`               | `@selectLegend`, `@selectDatapoint`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`        | `#svg`, `#legend`, `#time-label`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background`, `#pattern`                 | ✅             | ✅     |
diff --git a/package.json b/package.json
index fbebf672..fcb06cb3 100644
--- a/package.json
+++ b/package.json
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 3fa513a4..172ed9f2 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,6 +55,7 @@ import ArenaVueUiHistoryPlot from "../TestingArena/ArenaVueUiHistoryPlot.vue";
 import ArenaVueUiCirclePack from "../TestingArena/ArenaVueUiCirclePack.vue";
 import ArenaVueUiWorld from "../TestingArena/ArenaVueUiWorld.vue";
 import ArenaVueUiTable from "../TestingArena/ArenaVueUiTable.vue";
+import ArenaVueUiRidgeline from "../TestingArena/ArenaVueUiRidgeline.vue";
 
 const components = ref([             //------|
   /*____________________*/"VueUiXy", //  0
@@ -111,6 +112,7 @@ const components = ref([             //------|
   /*____________*/"VueUiCirclePack", // 51
   /*_________________*/"VueUiWorld", // 52
   /*_________________*/"VueUiTable", // 53
+  /*_____________*/"VueUiRidgeline", // 54
 
   /**
    * TODO: migrate manual testing for the following:
@@ -123,7 +125,7 @@ const components = ref([             //------|
  * Modify the index to display a component
  * [0] = VueUiXy 
  */
- const selectedComponent = ref(components.value[52]);
+ const selectedComponent = ref(components.value[54]);
 
 /**
  * Legacy testing arena where some non chart components can be tested
@@ -305,5 +307,8 @@ const showOldArena = ref(false);
   <!-- 53 -->
   <ArenaVueUiTable v-if="selectedComponent === 'VueUiTable'" />
 
+  <!-- 54 -->
+  <ArenaVueUiRidgeline v-if="selectedComponent === 'VueUiRidgeline'" />
+
   <!-- Add testing arena for new components here -->
 </template>
\ No newline at end of file
diff --git a/src/TestingArena.vue b/src/TestingArena.vue
index f0d3fefd..94039204 100644
--- a/src/TestingArena.vue
+++ b/src/TestingArena.vue
@@ -2204,10 +2204,11 @@ const skeletonOptions = ref([
   'stripPlot',
   'bullet',
   'historyPlot',
-  'circlePack'
+  'circlePack',
+  'ridgleline'
 ]);
 
-const skeletonChoice = ref('circlePack')
+const skeletonChoice = ref('ridgeline')
 
 const tiremarksDataset = ref({
   percentage: 75
diff --git a/src/atoms/BaseIcon.vue b/src/atoms/BaseIcon.vue
index efbe6dce..279d455d 100755
--- a/src/atoms/BaseIcon.vue
+++ b/src/atoms/BaseIcon.vue
@@ -189,7 +189,9 @@ const icons = computed(() => {
         curlyBrackets: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 5 2 C 3 2 2 3 2 5 L 2.35 7.988 C 2 9 1 9 1 10 C 1 11 2 11 2.396 11.949 L 2 15 C 2 17 3 18 5 18 M 15 2 C 17 2 18 3 18 5 L 17.611 8.035 C 18 9 19 9 19 10 C 19 11 18 11 17.611 12.008 L 18 15 C 18 17 17 18 15 18"/>`,
         curlySpread: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 5 2 C 3 2 2 3 2 5 L 2.35 7.988 C 2 9 1 9 1 10 C 1 11 2 11 2.396 11.949 L 2 15 C 2 17 3 18 5 18 M 15 2 C 17 2 18 3 18 5 L 17.611 8.035 C 18 9 19 9 19 10 C 19 11 18 11 17.611 12.008 L 18 15 C 18 17 17 18 15 18 M 10 9 A 1 1 0 0 0 10 11 A 1 1 0 0 0 10 9 M 6 9 A 1 1 0 0 0 6 11 A 1 1 0 0 0 6 9 M 14 9 A 1 1 0 0 0 14 11 A 1 1 0 0 0 14 9"/>`,
         text: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 12 2 L 12 4 L 8 4 L 8 18 L 6 18 L 6 4 L 2 4 L 2 2 M 12 15 L 18 15 M 12 7 L 18 7 M 12 11 L 18 11"/>`,
-        world: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 10 1 A 1 1 0 0 0 10 19 A 1 1 0 0 0 10 1 C 3 4 3 16 10 19 M 10 1 C 17 4 17 16 10 19 M 10 1 L 10 19 M 1 10 L 19 10 M 1 10"/>`
+        world: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 10 1 A 1 1 0 0 0 10 19 A 1 1 0 0 0 10 1 C 3 4 3 16 10 19 M 10 1 C 17 4 17 16 10 19 M 10 1 L 10 19 M 1 10 L 19 10 M 1 10"/>`,
+        eye: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 Q 10 1 19 10 Q 10 19 1 10 M 10 7 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 7 M 10 9 A 1 1 0 0 0 10 11 A 1 1 0 0 0 10 9"/>`,
+        chartRidgeline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 15 L 4 16 L 7 14 L 10 18 L 14 10 L 17 16 L 19 15 M 1 12 L 6 11 L 10 12 L 14 6 M 14 6 L 17 11 L 19 12 M 1 9 L 6 8 L 9 8 L 14 1 L 17 6 L 19 6"/>`
     }
 });
 
diff --git a/src/components/vue-data-ui.vue b/src/components/vue-data-ui.vue
index b9705680..2bbca5e4 100644
--- a/src/components/vue-data-ui.vue
+++ b/src/components/vue-data-ui.vue
@@ -72,7 +72,8 @@ const components = {
     VueUiFunnel: defineAsyncComponent(() => import('./vue-ui-funnel.vue')),
     VueUiHistoryPlot: defineAsyncComponent(() => import('./vue-ui-history-plot.vue')),
     VueUiCirclePack: defineAsyncComponent(() => import('./vue-ui-circle-pack.vue')),
-    VueUiWorld: defineAsyncComponent(() => import('./vue-ui-world.vue'))
+    VueUiWorld: defineAsyncComponent(() => import('./vue-ui-world.vue')),
+    VueUiRidgeline: defineAsyncComponent(() => import('./vue-ui-ridgeline.vue'))
 };
 
 const componentProps = {
@@ -135,7 +136,8 @@ const componentProps = {
     VueUiFunnel: ['config', 'dataset'],
     VueUiHistoryPlot: ['config', 'dataset'],
     VueUiCirclePack: ['config', 'dataset'],
-    VueUiWorld: ['config', 'dataset']
+    VueUiWorld: ['config', 'dataset'],
+    VueUiRidgeline: ['config', 'dataset']
 };
 
 const emit = defineEmits([
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
new file mode 100644
index 00000000..f037d534
--- /dev/null
+++ b/src/components/vue-ui-ridgeline.vue
@@ -0,0 +1,1081 @@
+<script setup>
+import { ref, computed, onMounted, watch, onBeforeUnmount, nextTick } from "vue";
+import { 
+    adaptColorToBackground,
+    applyDataLabel, 
+    convertColorToHex, 
+    convertCustomPalette, 
+    createCsvContent, 
+    createSmoothAreaSegments, 
+    createStraightPath, 
+    createUid, 
+    dataLabel, 
+    downloadCsv, 
+    error, 
+    getMissingDatasetAttributes, 
+    objectIsEmpty, 
+    palette, 
+    slugify,
+    themePalettes,
+    XMLNS 
+} from "../lib";
+import { useUserOptionState } from "../useUserOptionState";
+import { useChartAccessibility } from "../useChartAccessibility";
+import { usePrinter } from "../usePrinter";
+import { throttle } from "../canvas-lib";
+import { useResponsive } from "../useResponsive";
+import { useConfig } from "../useConfig";
+import { useNestedProp } from "../useNestedProp";
+import Accordion from "./vue-ui-accordion.vue";
+import BaseDraggableDialog from "../atoms/BaseDraggableDialog.vue";
+import DataTable from "../atoms/DataTable.vue";
+import Legend from "../atoms/Legend.vue";
+import PenAndPaper from "../atoms/PenAndPaper.vue";
+import Shape from "../atoms/Shape.vue";
+import Skeleton from "./vue-ui-skeleton.vue";
+import Title from "../atoms/Title.vue";
+import UserOptions from "../atoms/UserOptions.vue";
+import VueUiXy from "./vue-ui-xy.vue";
+import themes from "../themes.json";
+
+const { vue_ui_ridgeline: DEFAULT_CONFIG } = useConfig();
+
+const props = defineProps({
+    config: {
+        type: Object,
+        default() {
+            return {}
+        }
+    },
+    dataset: {
+        type: Array,
+        default() {
+            return []
+        }
+    },
+});
+
+const isDataset = computed({
+    get() {
+        return !!props.dataset && props.dataset.length;
+    },
+    set(bool) {
+        return bool;
+    }
+});
+
+const emit = defineEmits(['selectLegend', 'selectDatapoint', 'selectX'])
+
+const ridgelineChart = ref(null);
+const chartTitle = ref(null);
+const chartLegend = ref(null);
+const resizeObserver = ref(null);
+const source = ref(null);
+const noTitle = ref(null);
+const titleStep = ref(0);
+const tableStep = ref(0);
+const legendStep = ref(0);
+const uid = ref(createUid());
+const step = ref(0);
+const rowCount = ref(0);
+const baseWidth = ref(512);
+const selectedX = ref(null);
+const selectedDatapoint = ref(null);
+const dialog = ref(null);
+
+function prepareConfig() {
+    const mergedConfig = useNestedProp({
+        userConfig: props.config,
+        defaultConfig: DEFAULT_CONFIG
+    });
+    if (mergedConfig.theme) {
+        return {
+            ...useNestedProp({
+                userConfig: themes.vue_ui_ridgeline[mergedConfig.theme] || props.config,
+                defaultConfig: mergedConfig
+            }),
+            customPalette: themePalettes[mergedConfig.theme] || palette
+        }
+    } else {
+        return mergedConfig;
+    }
+}
+
+const FINAL_CONFIG = computed({
+    get: () => {
+        return prepareConfig();
+    },
+    set: (newCfg) => {
+        return newCfg;
+    }
+});
+
+const rowHeight = ref(Math.min(
+    FINAL_CONFIG.value.style.chart.areas.height,
+    FINAL_CONFIG.value.style.chart.areas.rowHeight,
+));
+
+const { 
+    userOptionsVisible, 
+    setUserOptionsVisibility, 
+    keepUserOptionState 
+} = useUserOptionState({ config: FINAL_CONFIG.value });
+
+const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
+
+onMounted(prepareChart);
+
+onBeforeUnmount(() => {
+    if (resizeObserver.value) resizeObserver.value.disconnect();
+});
+
+function prepareChart() {
+    if (objectIsEmpty(props.dataset)) {
+        error({
+            componentName: 'VueUiRidgeline',
+            type: 'dataset'
+        });
+    } else {
+        props.dataset.forEach((ds, i) => {
+            getMissingDatasetAttributes({
+                datasetObject: ds,
+                requiredAttributes: ['name', 'datapoints']
+            }).forEach(attr => {
+                isDataset.value = false;
+                error({
+                    componentName: 'VueUiRidgeline',
+                    type: 'datasetSerieAttribute',
+                    property: attr,
+                    index: i
+                });
+            });
+
+            if (ds.datapoints.length) {
+                ds.datapoints.forEach((dp, j) => {
+                    getMissingDatasetAttributes({
+                        datasetObject: dp,
+                        requiredAttributes: ['name', 'values']
+                    }).forEach(attr => {
+                        isDataset.value = false;
+                        error({
+                            componentName: 'VueUiRidgeline',
+                            type: 'datasetSerieAttribute',
+                            property: `datapoint.${attr}`,
+                            index: `${i}-${j}`
+                        });
+                    });
+                });
+            }
+        });
+    }
+
+    rowCount.value = props.dataset.length;
+
+    rowHeight.value = Math.min(
+        FINAL_CONFIG.value.style.chart.areas.height,
+        FINAL_CONFIG.value.style.chart.areas.rowHeight,
+    );
+
+    if (FINAL_CONFIG.value.responsive) {
+        const handleResize = throttle(() => {
+            const { width, height } = useResponsive({
+                chart: ridgelineChart.value,
+                title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
+                legend: FINAL_CONFIG.value.style.chart.legend.show ? chartLegend.value : null,
+                source: source.value,
+                noTitle: noTitle.value
+            });
+
+            requestAnimationFrame(() => {
+                baseWidth.value = width;
+                rowHeight.value = (height / props.dataset.length);
+            });
+        });
+
+        resizeObserver.value = new ResizeObserver(handleResize);
+        resizeObserver.value.observe(ridgelineChart.value.parentNode);
+    }
+}
+
+const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
+    elementId: `vue-ui-ridgeline_${uid.value}`,
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-ridgeline',
+    options: FINAL_CONFIG.value.userOptions.print
+});
+
+const hasOptionsNoTitle = computed(() => {
+    return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.chart.title.text;
+});
+
+const customPalette = computed(() => {
+    return convertCustomPalette(FINAL_CONFIG.value.customPalette);
+});
+
+const mutableConfig = ref({
+    showTable: FINAL_CONFIG.value.table.show,
+});
+
+watch(() => props.config, (_newCfg) => {
+    FINAL_CONFIG.value = prepareConfig();
+    userOptionsVisible.value = !FINAL_CONFIG.value.userOptions.showOnChartHover;
+    prepareChart();
+    titleStep.value += 1;
+    legendStep.value += 1;
+    rowHeight.value = Math.min(
+        FINAL_CONFIG.value.style.chart.areas.height,
+        FINAL_CONFIG.value.style.chart.areas.rowHeight
+    );
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+}, { deep: true });
+
+watch(() => props.dataset, prepareChart, { deep: true });
+
+const overlapRatio = computed(() => {
+    return FINAL_CONFIG.value.style.chart.areas.height / FINAL_CONFIG.value.style.chart.areas.rowHeight;
+});
+
+function segregate(slug) {
+    if (segregated.value.includes(slug)) {
+        segregated.value = segregated.value.filter(s => s !== slug)
+    } else {
+        segregated.value.push(slug)
+    }
+
+    emit('selectLegend', drawableDataset.value)
+}
+
+const formattedDataset = computed(() => {
+    if (!isDataset.value) return []
+
+    return props.dataset.map((ds, i) => {
+        return {
+            ...ds,
+            labelLen: measureSvgTextWidth(ds.name, FINAL_CONFIG.value.style.chart.yAxis.labels.fontSize),
+            uid: createUid(),
+            datapoints: ds.datapoints.map((dp, j) => {
+                const color = dp.color ? convertColorToHex(dp.color) : customPalette.value[j] || palette[j] || palette[j % palette.length];
+                const id = slugify(dp.name);
+                return {
+                    ...dp,
+                    color,
+                    id
+                }
+            })
+        }
+    });
+});
+
+const baseHeight = computed(() => {
+    return FINAL_CONFIG.value.style.chart.padding.top + (rowHeight.value * props.dataset.length) + (rowHeight.value * overlapRatio.value);
+});
+
+const drawableArea = computed(() => {
+    return {
+        fullHeight: svg.value.padding.top + svg.value.padding.bottom + svg.value.height,
+        top: svg.value.padding.top,
+        left: svg.value.padding.left,
+        right: svg.value.width - svg.value.padding.right,
+        bottom: svg.value.padding.top + svg.value.height,
+        width: svg.value.width - (svg.value.padding.left + svg.value.padding.right)
+    }
+});
+
+const svg = computed(() => {
+    const padding = FINAL_CONFIG.value.style.chart.padding;
+    return {
+        width: baseWidth.value,
+        height: baseHeight.value,
+        padding
+    }
+});
+
+const xAxisTrapsAndLabels = computed(() => {
+    const maxLabelLen = Math.max(...formattedDataset.value.map(el => el.labelLen));
+    const maxDpLen = Math.max(...formattedDataset.value.flatMap(el => el.datapoints.map(dp => dp.values.length)));
+    const startX = svg.value.padding.left + maxLabelLen + 16 + FINAL_CONFIG.value.style.chart.yAxis.labels.offsetX;
+    const slotSize = (drawableArea.value.width - startX) / maxDpLen;
+
+    const arr = [];
+
+    for (let i = 0; i < maxDpLen; i += 1) {
+        arr.push({
+            selectorX: startX + (slotSize * i),
+            x: startX + (slotSize * i) - slotSize / 2,
+            y: drawableArea.value.top,
+            label: FINAL_CONFIG.value.style.chart.xAxis.labels.values[i] || '',
+            index: i,
+            width: slotSize,
+            height: baseHeight.value
+        })
+    }
+    return arr;
+})
+
+function selectX(trap) {
+    emit('selectX', formattedDataset.value.map(ds => {
+        return ds.datapoints.map(dp => {
+            return {
+                dp,
+                selected: dp.values[trap.index]
+            }
+        });
+    }));
+}
+
+function stringSize(str, fontSize) {
+    const len = str.length;
+    return (len * fontSize / 2) + fontSize;
+}
+
+function isTextOverflowingRight(x, text, fontSize) {
+    const size = stringSize(text, fontSize);
+    return x + size > drawableArea.value.right;
+}
+
+function measureSvgTextWidth(text, fontSize, fontFamily = 'sans-serif') {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const size = typeof fontSize === 'number' ? `${fontSize}px` : fontSize;
+    ctx.font = `${size} ${fontFamily}`;
+    const metrics = ctx.measureText(text);
+    return metrics.width;
+}
+
+const drawableDataset = computed(() => {
+    const _rh = rowHeight.value
+
+    const maxLabelLen = Math.max(...formattedDataset.value.map(el => el.labelLen));
+    const maxDpLen = Math.max(...formattedDataset.value.flatMap(el => el.datapoints.map(dp => dp.values.length)));
+    const maxVal = Math.max(...formattedDataset.value.flatMap(el => el.datapoints.flatMap(dp => dp.values)));
+    const minVal = Math.min(...formattedDataset.value.flatMap(el => el.datapoints.flatMap(dp => dp.values)));
+    const startX = svg.value.padding.left + maxLabelLen + 16 + FINAL_CONFIG.value.style.chart.yAxis.labels.offsetX;
+    const slotSize = (drawableArea.value.width - startX) / maxDpLen;
+    const absoluteMin = Math.abs(Math.min(minVal, 0));
+    const absoluteMax = maxVal + absoluteMin;
+
+    function ratioToMax(v) {
+        return isNaN(v / absoluteMax) ? 0 : v / absoluteMax;
+    }
+
+    return formattedDataset.value.map((ds, i) => {
+        const base = drawableArea.value.top + (rowHeight.value * (i));
+        const zero = drawableArea.value.top + base + ((rowHeight.value * overlapRatio.value) * (1 - (ratioToMax(absoluteMin))));
+        return {
+            ...ds,
+            label: {
+                x: startX - FINAL_CONFIG.value.style.chart.yAxis.labels.fontSize,
+                y: zero
+            },
+            datapoints: ds.datapoints
+                .map(dp => {
+                    const plots = dp.values.map((v, k) => {
+                        const absoluteValue = isNaN(v) || [undefined, null, 'NaN', NaN, Infinity, -Infinity].includes(v) ? 0 : v || 0;
+                        const x = startX + (slotSize * k);
+                        const y = drawableArea.value.top + base + ((rowHeight.value * overlapRatio.value) * (1 - ratioToMax(absoluteValue + absoluteMin)));
+                        const isMaxPoint = v === Math.max(...dp.values);
+
+                        return {
+                            x,
+                            y,
+                            value: v,
+                            isMaxPoint,
+                            zero
+                        }
+                    });
+
+                    const smoothPath = `${createSmoothAreaSegments(plots, zero, false, false)}`;
+                    const straightPath = `M ${startX},${zero} ${createStraightPath(plots)} ${plots.at(-1).x},${zero}`;
+                    const zeroPath = `M ${startX},${zero} ${plots.at(-1).x},${zero}`;
+
+
+                    return {
+                        ...dp,
+                        plots,
+                        smoothPath,
+                        straightPath,
+                        zeroPath,
+                    }
+                })
+                .filter(dp => !segregated.value.includes(dp.id))
+        }
+    });
+});
+
+const segregated = ref([]);
+
+function createLegend(dataset) {
+    const map = new Map();
+    dataset.forEach(ds => {
+        ds.datapoints.forEach((dp, j) => {
+            const id = slugify(dp.name);
+            if (!map.has(id)) {
+                map.set(id, {
+                    id,
+                    name: dp.name,
+                    color: dp.color,
+                    shape: 'circle',
+                    segregate: () => segregate(id),
+                    isSegregated: segregated.value.includes(id),
+                    opacity: segregated.value.includes(id) ? 0.5 : 1
+                });
+            }
+        });
+    });
+    return Array.from(map.values());
+}
+
+const legendSet = computed(() => {
+    return createLegend(formattedDataset.value);
+});
+
+const legendConfig = computed(() => {
+    return {
+        cy: 'donut-div-legend',
+        backgroundColor: FINAL_CONFIG.value.style.chart.legend.backgroundColor,
+        color: FINAL_CONFIG.value.style.chart.legend.color,
+        fontSize: FINAL_CONFIG.value.style.chart.legend.fontSize,
+        paddingBottom: 12,
+        fontWeight: FINAL_CONFIG.value.style.chart.legend.bold ? 'bold' : ''
+    }
+})
+
+const isFullscreen = ref(false)
+function toggleFullscreen(state) {
+    isFullscreen.value = state;
+    step.value += 1;
+}
+
+const xyConfig = ref({})
+const xyDataset = ref([]);
+
+function createXyDatasetForDialog(ds) {
+
+    emit('selectDatapoint', ds);
+
+    if (!FINAL_CONFIG.value.style.chart.dialog.show) return;
+
+    xyDataset.value = ds.datapoints.map(dp => {
+        return {
+            name: dp.name,
+            color: dp.color,
+            type: 'line',
+            useArea: true,
+            smooth: FINAL_CONFIG.value.style.chart.areas.smooth,
+            series: dp.values,
+        }
+    });
+
+    selectedDatapoint.value = ds;
+
+    xyConfig.value = {
+        ...FINAL_CONFIG.value.style.chart.dialog.xyChart,
+        responsive: true, // Overriding 
+        chart: {
+            ...FINAL_CONFIG.value.style.chart.dialog.xyChart.chart,
+            grid: {
+                ...FINAL_CONFIG.value.style.chart.dialog.xyChart.chart.grid,
+                labels: {
+                    ...FINAL_CONFIG.value.style.chart.dialog.xyChart.chart.grid.labels,
+                    xAxisLabels: {
+                        ...FINAL_CONFIG.value.style.chart.dialog.xyChart.chart.grid.labels.xAxisLabels,
+                        values: FINAL_CONFIG.value.style.chart.xAxis.labels.values // Overriding
+                    }
+                }
+            },
+            tooltip: {
+                ...FINAL_CONFIG.value.style.chart.dialog.xyChart.chart.tooltip,
+                showTimeLabel: FINAL_CONFIG.value.style.chart.xAxis.labels.values.length > 0 // Overriding
+            }
+        }
+    };
+
+    dialog.value && dialog.value.open();
+}
+
+const selectedYAxisLabelIndex = ref(null);
+
+function setYAxisLabelHoverIndex(index) {
+    selectedYAxisLabelIndex.value = index;
+}
+
+function resetYAxisLabelIndex() {
+    selectedYAxisLabelIndex.value = null;
+}
+
+const isAnnotator = ref(false);
+function toggleAnnotator() {
+    isAnnotator.value = !isAnnotator.value;
+}
+
+function toggleTable() {
+    mutableConfig.value.showTable = !mutableConfig.value.showTable;
+}
+
+const table = computed(() => {
+    const allRows = drawableDataset.value.flatMap(ds => {
+        return ds.datapoints.flatMap(dp => {
+            return {
+                ...dp,
+                rowName: `${ds.name}: ${dp.name}`
+            }
+        });
+    });
+
+    const body = allRows.map(r => {
+        return [
+            {
+                name: r.rowName,
+                color: r.color
+            },
+            ...r.values
+        ]
+    })
+    return { body };
+});
+
+const dataTable = computed(() => {
+    const head = [
+        FINAL_CONFIG.value.table.columnNames.series,
+        ...FINAL_CONFIG.value.style.chart.xAxis.labels.values
+    ];
+
+    const config = {
+        th: {
+            backgroundColor: FINAL_CONFIG.value.table.th.backgroundColor,
+            color: FINAL_CONFIG.value.table.th.color,
+            outline: FINAL_CONFIG.value.table.th.outline
+        },
+        td: {
+            backgroundColor: FINAL_CONFIG.value.table.td.backgroundColor,
+            color: FINAL_CONFIG.value.table.td.color,
+            outline: FINAL_CONFIG.value.table.td.outline
+        },
+        breakpoint: FINAL_CONFIG.value.table.responsiveBreakpoint
+    }
+
+    const colNames = [
+        FINAL_CONFIG.value.table.columnNames.series,
+        ...FINAL_CONFIG.value.style.chart.xAxis.labels.values,
+    ];
+
+    return {
+        colNames,
+        head,
+        body: table.value.body,
+        config
+    }
+});
+
+function generateCsv() {
+    nextTick(() => {
+        const labels = [
+            [FINAL_CONFIG.value.table.columnNames.series, ...FINAL_CONFIG.value.style.chart.xAxis.labels.values.map(v => [v])],
+            ...table.value.body.map((v, i) => {
+                return  [v[0].name, ...v.slice(1)]
+            })
+        ];
+        const tableXls = [
+            [FINAL_CONFIG.value.style.chart.title.text],
+            [FINAL_CONFIG.value.style.chart.title.subtitle.text],
+        ].concat(labels);
+        const csvContent = createCsvContent(tableXls);
+        downloadCsv({
+            csvContent,
+            title: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-ridgeline'
+        });
+    });
+}
+
+function getData() {
+    return drawableDataset.value;
+}
+
+defineExpose({
+    getData,
+    generateImage,
+    generatePdf,
+    generateCsv,
+    toggleAnnotator,
+    toggleTable
+});
+
+</script>
+
+<template>
+    <div 
+        ref="ridgelineChart"
+        :class="`vue-ui-ridgeline ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" 
+        :id="`vue-ui-ridgeline_${uid}`"
+        :style="{
+            fontFamily: FINAL_CONFIG.style.fontFamily,
+            width: '100%',
+            textAlign: 'center',
+            background: FINAL_CONFIG.style.chart.backgroundColor,
+            height: FINAL_CONFIG.responsive ? '100%' : undefined
+        }"
+        @mouseenter="() => setUserOptionsVisibility(true)" 
+        @mouseleave="() => setUserOptionsVisibility(false)"
+    >
+
+        <!-- PEN AND PAPER -->
+        <PenAndPaper
+            v-if="FINAL_CONFIG.userOptions.buttons.annotator && svgRef"
+            :color="FINAL_CONFIG.style.chart.color"
+            :backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
+            :active="isAnnotator"
+            :svgRef="svgRef"
+            @close="toggleAnnotator"
+        />
+
+        <!-- NO TITLE -->
+        <slot name="userConfig"></slot>
+
+        <div
+            ref="noTitle"
+            v-if="hasOptionsNoTitle" 
+            class="vue-data-ui-no-title-space" 
+            :style="`height:36px; width: 100%;background:transparent`"
+        />
+
+        <!-- TITLE -->
+        <div ref="chartTitle" v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;padding-bottom:24px`">
+            <Title
+                :key="`title_${titleStep}`"
+                :config="{
+                    title: {
+                        cy: 'ridgeline-div-title',
+                        ...FINAL_CONFIG.style.chart.title,
+                    },
+                    subtitle: {
+                        cy: 'ridgeline-div-subtitle',
+                        ...FINAL_CONFIG.style.chart.title.subtitle
+                    }
+                }"
+            />
+        </div>
+
+        <!-- USER OPTIONS -->
+        <UserOptions
+            ref="details"
+            :key="`user_option_${step}`"
+            v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
+            :backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
+            :color="FINAL_CONFIG.style.chart.color"
+            :isPrinting="isPrinting"
+            :isImaging="isImaging"
+            :uid="uid"
+            :hasTooltip="false"
+            :hasPdf="FINAL_CONFIG.userOptions.buttons.pdf"
+            :hasImg="FINAL_CONFIG.userOptions.buttons.img"
+            :hasXls="FINAL_CONFIG.userOptions.buttons.csv"
+            :hasTable="FINAL_CONFIG.userOptions.buttons.table"
+            :hasLabel="false"
+            :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen"
+            :isFullscreen="isFullscreen"
+            :chartElement="ridgelineChart"
+            :position="FINAL_CONFIG.userOptions.position"
+            :isTooltip="false"
+            :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
+            :hasAnnotator="FINAL_CONFIG.userOptions.buttons.annotator"
+            :isAnnotation="isAnnotator"
+            :style="{
+                visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
+            }"
+            @toggleFullscreen="toggleFullscreen"
+            @generatePdf="generatePdf"
+            @generateCsv="generateCsv"
+            @generateImage="generateImage"
+            @toggleTable="toggleTable"
+            @toggleAnnotator="toggleAnnotator"
+        >
+            <template #menuIcon="{ isOpen, color }" v-if="$slots.menuIcon">
+                <slot name="menuIcon" v-bind="{ isOpen, color }"/>
+            </template>
+            <template #optionTooltip v-if="$slots.optionTooltip">
+                <slot name="optionTooltip"/>
+            </template>
+            <template #optionPdf v-if="$slots.optionPdf">
+                <slot name="optionPdf" />
+            </template>
+            <template #optionCsv v-if="$slots.optionCsv">
+                <slot name="optionCsv" />
+            </template>
+            <template #optionImg v-if="$slots.optionImg">
+                <slot name="optionImg" />
+            </template>
+            <template #optionTable v-if="$slots.optionTable">
+                <slot name="optionTable" />
+            </template>
+            <template v-if="$slots.optionFullscreen" #optionFullscreen="{ toggleFullscreen, isFullscreen }">
+                <slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }"/>
+            </template>
+            <template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
+                <slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
+            </template>
+        </UserOptions>
+
+        <!-- CHART -->
+        <svg ref="svgRef" :xmlns="XMLNS" v-if="isDataset"
+            :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
+            :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${drawableArea.fullHeight <= 0 ? 10 : drawableArea.fullHeight}`"
+            :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color};${FINAL_CONFIG.responsive ? 'height: 100%; width: 100%;' : ''}`">
+            <defs>
+                <linearGradient 
+                    v-for="(dp, i) in legendSet" 
+                    :id="`gradient-${dp.id}-${uid}`"
+                    x1="50%" y1="0%" x2="50%"
+                    y2="100%">
+                    <stop offset="0%" :stop-color="dp.color" stop-opacity="1" />
+                    <stop offset="30%" :stop-color="dp.color" stop-opacity="0.7" />
+                    <stop offset="70%" :stop-color="dp.color" stop-opacity="0.3" />
+                    <stop offset="100%" :stop-color="dp.color" stop-opacity="0.1" />
+                </linearGradient>
+            </defs>
+
+            <g v-if="$slots.pattern">
+                <defs v-for="(variable, i) in legendSet">
+                    <slot name="pattern" v-bind="{variable, patternId: `pattern_${uid}_${i}`}"/>
+                </defs>
+            </g>
+
+            <g v-for="(ds, i) in drawableDataset">
+                <!-- Paths -->
+                <g v-for="(dp, j) in ds.datapoints">
+                    <!-- PATH BACKGROUND -->
+                    <path 
+                        :fill="FINAL_CONFIG.style.chart.backgroundColor" 
+                        stroke="none" 
+                        stroke-linecap="round"
+                        :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath" 
+                        :style="{ opacity: FINAL_CONFIG.style.chart.areas.opacity }" 
+                    />
+
+                    <!-- PATH -->
+                    <path 
+                        :fill="`url(#gradient-${dp.id}-${uid})`"
+                        :stroke="FINAL_CONFIG.style.chart.areas.stroke.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.areas.stroke.color"
+                        :stroke-width="FINAL_CONFIG.style.chart.areas.strokeWidth" 
+                        :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath"
+                        stroke-linecap="round" 
+                        stroke-linejoin="round" 
+                    />
+
+                    <!-- ZERO LINE -->
+                    <path
+                        :stroke="FINAL_CONFIG.style.chart.zeroLine.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.zeroLine.stroke"
+                        :stroke-dasharray="FINAL_CONFIG.style.chart.zeroLine.strokeDasharray"
+                        :stroke-width="FINAL_CONFIG.style.chart.zeroLine.strokeWidth" 
+                        :d="dp.zeroPath"
+                        stroke-linecap="round" 
+                    />
+
+                    <!-- MAX POINT INDICATOR -->
+                    <template v-if="FINAL_CONFIG.style.chart.areas.maxPoint.show && dp.plots.length > 1">
+                        <template v-for="plot in dp.plots">
+                            <line 
+                                v-if="plot.isMaxPoint"
+                                :x1="plot.x"
+                                :y1="plot.y"
+                                :x2="plot.x"
+                                :y2="plot.zero"
+                                :stroke="FINAL_CONFIG.style.chart.areas.maxPoint.adaptStrokeToBackground ? adaptColorToBackground(dp.color) : FINAL_CONFIG.style.chart.areas.maxPoint.stroke"
+                                :stroke-width="FINAL_CONFIG.style.chart.areas.maxPoint.strokeWidth"
+                                stroke-linecap="round"
+                                :stroke-dasharray="FINAL_CONFIG.style.chart.areas.maxPoint.strokeDasharray"
+                            />
+                        </template>
+                    </template>
+
+                    <!-- SINGLE PLOT CASE -->
+                    <template v-if="dp.plots.length === 1">
+                        <circle
+                            :cx="dp.plots[0].x" 
+                            :cy="dp.plots[0].y"
+                            :stroke="FINAL_CONFIG.style.chart.selector.dot.stroke"
+                            :stroke-width="FINAL_CONFIG.style.chart.selector.dot.strokeWidth"
+                            :r="FINAL_CONFIG.style.chart.selector.dot.radius" 
+                            :fill="FINAL_CONFIG.style.chart.selector.dot.useDatapointColor ? dp.color : FINAL_CONFIG.style.chart.selector.dot.fill" 
+                            :style="{
+                                pointerEvents: 'none'
+                            }" 
+                        />
+                    </template>
+                </g>
+
+                <!-- Y AXIS LABELS -->
+                <text 
+                    :x="ds.label.x" 
+                    :y="ds.label.y" text-anchor="end"
+                    :font-size="FINAL_CONFIG.style.chart.yAxis.labels.fontSize"
+                    :font-weight="FINAL_CONFIG.style.chart.yAxis.labels.bold ? 'bold' : 'normal'" 
+                    :fill="FINAL_CONFIG.style.chart.yAxis.labels.color" 
+                    :style="{
+                        cursor: FINAL_CONFIG.style.chart.dialog.show ? 'pointer': 'default'
+                    }"
+                    :text-decoration="FINAL_CONFIG.style.chart.dialog.show && (selectedYAxisLabelIndex === i || (!!selectedDatapoint && ds.uid === selectedDatapoint.uid)) ? 'underline' : ''"
+                    @mouseenter="setYAxisLabelHoverIndex(i)"
+                    @mouseleave="resetYAxisLabelIndex"
+                    @click="createXyDatasetForDialog(ds)"
+                >
+                    {{ ds.name }}
+                </text>
+            </g>
+
+            <!-- X AXIS LABELS -->
+            <g v-if="FINAL_CONFIG.style.chart.xAxis.labels.values.length">
+                <template v-for="(xLabel, i) in xAxisTrapsAndLabels">
+                    <slot name="time-label" v-bind="{
+                        show: (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),
+                        fontSize: FINAL_CONFIG.style.chart.xAxis.labels.fontSize,
+                        content: xLabel.label,
+                        textAnchor: FINAL_CONFIG.style.chart.xAxis.labels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.xAxis.labels.rotation < 0 ? 'end' : 'middle',
+                        fill: FINAL_CONFIG.style.chart.xAxis.labels.color,
+                        transform:`translate(${xLabel.selectorX}, ${drawableArea.top + xLabel.height + FINAL_CONFIG.style.chart.xAxis.labels.offsetY}), rotate(${FINAL_CONFIG.style.chart.xAxis.labels.rotation})`,
+                        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) || 
+                            (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)"
+                            :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
+                            }"
+                        >
+                            {{ xLabel.label }}
+                        </text>
+                    </slot>
+                </template>
+            </g>
+
+            <!-- TOOLTIP TRAPS, SELECTOR AND DATALABELS-->
+            <g>
+                <!-- TOOLTIP TRAPS -->
+                <rect 
+                    v-for="(trap, i) in xAxisTrapsAndLabels" 
+                    :x="trap.x" 
+                    :y="trap.y" 
+                    :width="trap.width < 0 ? 0.1 : trap.width"
+                    :height="trap.height < 0 ? 0.1 : trap.height" 
+                    fill="transparent" 
+                    @mouseenter="selectedX = trap"
+                    @mouseleave="selectedX = null"
+                    @click="() => selectX(trap)"
+                />
+
+                <!-- SELECTOR -->
+                <line 
+                    v-if="FINAL_CONFIG.style.chart.selector.show && !!selectedX" 
+                    :x1="selectedX.selectorX"
+                    :x2="selectedX.selectorX" 
+                    :y1="selectedX.y" 
+                    :y2="selectedX.y + selectedX.height - rowHeight / 2"
+                    :stroke="FINAL_CONFIG.style.chart.selector.stroke"
+                    :stroke-width="FINAL_CONFIG.style.chart.selector.strokeWidth"
+                    :stroke-dasharray="FINAL_CONFIG.style.chart.selector.strokeDasharray" 
+                    stroke-linecap="round"
+                    :style="{ pointerEvents: 'none' }" 
+                />
+
+                <!-- SELECTED X -->
+                <template v-if="!!selectedX">
+                    <template v-for="ds in drawableDataset">
+                        <template v-for="dp in ds.datapoints">
+                            <template v-for="(plot, k) in dp.plots">
+                                <!-- DOT -->
+                                <circle 
+                                    v-if="!!selectedX && selectedX.index === k" 
+                                    :cx="plot.x" 
+                                    :cy="plot.y"
+                                    :stroke="FINAL_CONFIG.style.chart.selector.dot.stroke"
+                                    :stroke-width="FINAL_CONFIG.style.chart.selector.dot.strokeWidth"
+                                    :r="FINAL_CONFIG.style.chart.selector.dot.radius" 
+                                    :fill="FINAL_CONFIG.style.chart.selector.dot.useDatapointColor ? dp.color : FINAL_CONFIG.style.chart.selector.dot.fill" 
+                                    :style="{
+                                        pointerEvents: 'none'
+                                    }" 
+                                />
+                                <!-- DATA LABELS -->
+                                <text v-if="selectedX && selectedX.index === k"
+                                    :x="isTextOverflowingRight(
+                                        plot.x, applyDataLabel(
+                                            FINAL_CONFIG.style.chart.selector.labels.formatter,
+                                            plot.value,
+                                            dataLabel({
+                                                p: FINAL_CONFIG.style.chart.xAxis.labels.prefix,
+                                                v: plot.value,
+                                                s: FINAL_CONFIG.style.chart.xAxis.labels.suffix,
+                                                r: FINAL_CONFIG.style.chart.selector.labels.rounding
+                                            })
+                                        ), FINAL_CONFIG.style.chart.selector.labels.fontSize) ? plot.x - (FINAL_CONFIG.style.chart.selector.labels.fontSize / 2) : plot.x + (FINAL_CONFIG.style.chart.selector.labels.fontSize / 2)"
+                                    :y="plot.y + FINAL_CONFIG.style.chart.selector.labels.fontSize / 3" :text-anchor="isTextOverflowingRight(
+                                        plot.x, applyDataLabel(
+                                            FINAL_CONFIG.style.chart.selector.labels.formatter,
+                                            plot.value,
+                                            dataLabel({
+                                                p: FINAL_CONFIG.style.chart.xAxis.labels.prefix,
+                                                v: plot.value,
+                                                s: FINAL_CONFIG.style.chart.xAxis.labels.suffix,
+                                                r: FINAL_CONFIG.style.chart.selector.labels.rounding
+                                            })
+                                        ), FINAL_CONFIG.style.chart.selector.labels.fontSize) ? 'end' : 'start'"
+                                    :font-size="FINAL_CONFIG.style.chart.selector.labels.fontSize"
+                                    :fill="FINAL_CONFIG.style.chart.selector.labels.color" :style="{
+                                        pointerEvents: 'none'
+                                    }">
+                                    {{ applyDataLabel(
+                                        FINAL_CONFIG.style.chart.selector.labels.formatter,
+                                        plot.value,
+                                        dataLabel({
+                                            p: FINAL_CONFIG.style.chart.xAxis.labels.prefix,
+                                            v: plot.value,
+                                            s: FINAL_CONFIG.style.chart.xAxis.labels.suffix,
+                                            r: FINAL_CONFIG.style.chart.selector.labels.rounding
+                                        })
+                                    ) }}
+                                </text>
+                            </template>
+                        </template>
+                    </template>
+                </template>
+            </g>
+            <slot name="svg" :svg="svg"/>
+        </svg>
+
+        <div v-if="$slots.watermark" class="vue-data-ui-watermark">
+            <slot name="watermark" v-bind="{ isPrinting: isPrinting || isImaging }"/>
+        </div>
+
+        <Skeleton
+            v-if="!isDataset"
+            :config="{
+                type: 'ridgeline',
+                style: {
+                    backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
+                    ridgeline: {
+                        color: '#CCCCCC'
+                    }
+                }
+            }"
+        />
+
+        <div ref="chartLegend">
+            <Legend
+                v-if="FINAL_CONFIG.style.chart.legend.show"
+                :key="`legend_${legendStep}`"
+                :legendSet="legendSet"
+                :config="legendConfig"
+                @clickMarker="({ legend }) => segregate(legend.id)"
+            >
+                <template #legend-pattern="{ legend, index }" v-if="$slots.pattern">
+                    <Shape
+                        :shape="legend.shape"
+                        :radius="30"
+                        stroke="none"
+                        :plot="{ x: 30, y: 30}"
+                        :fill="`url(#pattern_${uid}_${index})`"
+                    />
+                </template>
+
+                <template #item="{ legend }">
+                    <div 
+                        data-cy="legend-item"
+                        :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`"
+                        @click="legend.segregate()" 
+                    >
+                        {{ legend.name }}
+                    </div>
+                </template>
+            </Legend>
+            <slot name="legend" v-bind:legend="legendSet" />
+        </div>
+
+        <div v-if="$slots.source" ref="source" dir="auto">
+            <slot name="source" />
+        </div>
+
+        <!-- DATA TABLE -->
+        <Accordion
+            hideDetails
+            v-if="isDataset"
+            :config="{
+                open: mutableConfig.showTable,
+                maxHeight: 10000,
+                body: {
+                    backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
+                    color: FINAL_CONFIG.style.chart.color
+                },
+                head: {
+                    backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
+                    color: FINAL_CONFIG.style.chart.color
+                }
+            }"
+        >
+            <template #content>
+                <DataTable
+                    :key="`table_${tableStep}`"
+                    :colNames="dataTable.colNames"
+                    :head="dataTable.head"
+                    :body="dataTable.body"
+                    :config="dataTable.config"
+                    :title="`${FINAL_CONFIG.style.chart.title.text}${FINAL_CONFIG.style.chart.title.subtitle.text ? ` :${FINAL_CONFIG.style.chart.title.subtitle.text}`: ``}`"
+                    @close="mutableConfig.showTable = false"
+                >
+                    <template #th="{ th }">
+                        <div v-html="th"/>
+                    </template>
+                    <template #td="{ td }">
+                        {{ td.name ? td.name : applyDataLabel(
+                            FINAL_CONFIG.style.chart.selector.labels.formatter,
+                            td,
+                            dataLabel({
+                                p: FINAL_CONFIG.style.chart.xAxis.labels.prefix,
+                                v: td,
+                                s: FINAL_CONFIG.style.chart.xAxis.labels.suffix,
+                                r: FINAL_CONFIG.table.td.roundingValue                                
+                            })
+                        ) }}
+                    </template>
+                </DataTable>
+            </template>
+        </Accordion>
+
+        <BaseDraggableDialog
+            v-if="FINAL_CONFIG.style.chart.dialog.show"
+            ref="dialog" 
+            @close="selectedDatapoint = null"
+            :backgroundColor="FINAL_CONFIG.style.chart.dialog.backgroundColor"
+            :color="FINAL_CONFIG.style.chart.dialog.color"
+            :headerBg="FINAL_CONFIG.style.chart.dialog.header.backgroundColor"
+            :headerColor="FINAL_CONFIG.style.chart.dialog.header.color"
+        >
+            <template #title>
+                {{ selectedDatapoint.name }}
+            </template>
+            <VueUiXy v-if="selectedDatapoint" :config="xyConfig" :dataset="xyDataset" />
+        </BaseDraggableDialog>
+
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "../vue-data-ui.css";
+
+.vue-ui-ridgeline * {
+    transition: unset;
+}
+
+.vue-ui-ridgeline {
+    user-select: none;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/vue-ui-skeleton.vue b/src/components/vue-ui-skeleton.vue
index 522757f4..951a0b98 100644
--- a/src/components/vue-ui-skeleton.vue
+++ b/src/components/vue-ui-skeleton.vue
@@ -291,6 +291,32 @@ const ticks = computed(() => {
 
 <template>
     <div :id="uid" :class="{ 'vue-ui-skeleton': true, 'vue-ui-skeleton-animated': isAnimated }" :style="`background:${FINAL_CONFIG.style.backgroundColor};color:${FINAL_CONFIG.style.color};display:flex;align-items:center;justify-content:center;`">
+        <template v-if="type === 'ridgeline'">
+            <svg :xmlns="XMLNS" width="100%" viewBox="20 0 512 200" :style="`background:${FINAL_CONFIG.style.backgroundColor}`">
+                <PackageVersion />
+                <defs>
+                    <linearGradient
+                        :id="`ridgeline-gradient-${uid}`"
+                        x1="50%" y1="0%" x2="50%"
+                        y2="100%">
+                        <stop offset="0%" :stop-color="FINAL_CONFIG.style.ridgeline.color" stop-opacity="1" />
+                        <stop offset="30%" :stop-color="FINAL_CONFIG.style.ridgeline.color" stop-opacity="0.7" />
+                        <stop offset="70%" :stop-color="FINAL_CONFIG.style.ridgeline.color" stop-opacity="0.3" />
+                        <stop offset="100%" :stop-color="FINAL_CONFIG.style.ridgeline.color" stop-opacity="0.1" />
+                    </linearGradient>
+                </defs>
+                <path :fill="`url(#ridgeline-gradient-${uid})`" :stroke="FINAL_CONFIG.style.ridgeline.color" stroke-width="1" d="M66.6953125,60 L66.6953125,60 C72.88009982638889,59.403611453288086 79.06488715277779,58.89368232203086 85.24967447916667,58.21083435986425 C91.43446180555556,57.52798639769764 97.61924913194446,55.827101525061806 103.80403645833334,55.81495611628739 C109.98882378472223,55.802810707512975 116.17361111111111,55.808794600725854 122.3583984375,55.79659841225535 C128.54318576388889,55.784402223784845 134.7279730902778,50.50120257180663 140.91276041666669,50.50120257180663 C147.09754774305557,50.50120257180663 153.28233506944446,55.449371402529025 159.46712239583334,55.449371402529025 C165.65190972222223,55.449371402529025 171.83669704861111,52.6726852661858 178.021484375,52.6726852661858 C184.20627170138889,52.6726852661858 190.3910590277778,53.68748523105861 196.57584635416669,54.588107791627955 C202.76063368055557,55.4887303521973 208.94542100694446,59.17209535382662 215.13020833333334,59.17209535382662 C221.31499565972223,59.17209535382662 227.49978298611111,52.45924262596313 233.6845703125,52.45924262596313 C239.86935763888889,52.45924262596313 246.0541449652778,53.35394069624585 252.23893229166669,53.35394069624585 C258.4237196180556,53.35394069624585 264.60850694444446,48.87053557137407 270.79329427083337,48.87053557137407 C276.97808159722223,48.87053557137407 283.16286892361114,53.66236486164665 289.34765625,53.66236486164665 C295.5324435763889,53.66236486164665 301.71723090277777,27.591473273183208 307.9020182291667,27.591473273183208 C314.0868055555556,27.591473273183208 320.27159288194446,36.89852761880239 326.45638020833337,41.437518391010784 C332.64116753472223,45.97650916321916 338.82595486111114,54.832874234480315 345.0107421875,54.832874234480315 C351.1955295138889,54.832874234480315 357.38031684027777,18.691201442289355 363.5651041666667,18.691201442289355 C369.7498914930556,18.691201442289355 375.93467881944446,57.13764103396694 382.11946614583337,57.13764103396694 C388.30425347222223,57.13764103396694 394.48904079861114,45.68426316642005 400.673828125,40.20394349296662 C406.8586154513889,34.72362381951317 413.04340277777777,24.227858288281524 419.2281901041667,24.227858288281524 C425.4129774305556,24.227858288281524 431.59776475694446,40.62757421574731 437.78255208333337,40.62757421574731 C443.96733940972223,40.62757421574731 450.15212673611114,40.51108265240213 456.3369140625,40.28423459323992 C462.5217013888889,40.057386534077715 468.70648871527777,2.1986259303168354 474.8912760416667,2.1986259303168354 C481.0760633680556,2.1986259303168354 487.26085069444446,26.26823707335967 493.44563802083337,38.30304264488109 L493.44563802083337,60 " stroke-linecap="round" stroke-linejoin="round"></path>
+
+                <path :fill="`url(#ridgeline-gradient-${uid})`" :stroke="FINAL_CONFIG.style.ridgeline.color" stroke-width="1" d="M66.6953125,90 L66.6953125,90 C72.88009982638889,89.77691866194493 79.06488715277779,89.6480674216807 85.24967447916667,89.3307559858348 C91.43446180555556,89.0134445499889 97.61924913194446,87.68266335878263 103.80403645833334,87.68266335878263 C109.98882378472223,87.68266335878263 116.17361111111111,89.33939506404997 122.3583984375,89.33939506404997 C128.54318576388889,89.33939506404997 134.7279730902778,80.57818692301632 140.91276041666669,80.57818692301632 C147.09754774305557,80.57818692301632 153.28233506944446,84.72929899595943 159.46712239583334,84.72929899595943 C165.65190972222223,84.72929899595943 171.83669704861111,76.29369461861882 178.021484375,76.29369461861882 C184.20627170138889,76.29369461861882 190.3910590277778,87.15511944847793 196.57584635416669,87.15511944847793 C202.76063368055557,87.15511944847793 208.94542100694446,77.94863017425682 215.13020833333334,74.99584997381157 C221.31499565972223,72.04306977336633 227.49978298611111,68.02886623624688 233.6845703125,68.02886623624688 C239.86935763888889,68.02886623624688 246.0541449652778,77.62348634322068 252.23893229166669,80.79968178070098 C258.4237196180556,83.97587721818128 264.60850694444446,88.39897472556459 270.79329427083337,88.39897472556459 C276.97808159722223,88.39897472556459 283.16286892361114,63.96493991037978 289.34765625,63.96493991037978 C295.5324435763889,63.96493991037978 301.71723090277777,80.9314320263608 307.9020182291667,80.9314320263608 C314.0868055555556,80.9314320263608 320.27159288194446,60.30690675691305 326.45638020833337,60.30690675691305 C332.64116753472223,60.30690675691305 338.82595486111114,80.67911579309319 345.0107421875,80.67911579309319 C351.1955295138889,80.67911579309319 357.38031684027777,67.55382714087668 363.5651041666667,67.55382714087668 C369.7498914930556,67.55382714087668 375.93467881944446,81.05597396275368 382.11946614583337,81.05597396275368 C388.30425347222223,81.05597396275368 394.48904079861114,54.64612249628824 400.673828125,54.64612249628824 C406.8586154513889,54.64612249628824 413.04340277777777,55.13964865957763 419.2281901041667,55.91372079887162 C425.4129774305556,56.687792938165614 431.59776475694446,69.73490119628686 437.78255208333337,69.73490119628686 C443.96733940972223,69.73490119628686 450.15212673611114,64.42569974333888 456.3369140625,61.42720502984072 C462.5217013888889,58.42871031634255 468.70648871527777,51.619770711423186 474.8912760416667,51.619770711423186 C481.0760633680556,51.619770711423186 487.26085069444446,71.43616197640954 493.44563802083337,81.34435760890271 L493.44563802083337,90 " stroke-linecap="round" stroke-linejoin="round"></path>
+
+                <path :fill="`url(#ridgeline-gradient-${uid})`" :stroke="FINAL_CONFIG.style.ridgeline.color" stroke-width="1" d="M66.6953125,120 L66.6953125,120 C72.88009982638889,119.66196806626975 79.06488715277779,119.44533270180851 85.24967447916667,118.98590419880924 C91.43446180555556,118.52647569580996 97.61924913194446,117.81773649883283 103.80403645833334,116.83526495762351 C109.98882378472223,115.85279341641419 116.17361111111111,113.13699308912776 122.3583984375,112.1532391330314 C128.54318576388889,111.16948517693505 134.7279730902778,109.99850075011585 140.91276041666669,109.99850075011585 C147.09754774305557,109.99850075011585 153.28233506944446,110.52302856658399 159.46712239583334,111.20320255966007 C165.65190972222223,111.88337655273615 171.83669704861111,117.86718432281516 178.021484375,117.86718432281516 C184.20627170138889,117.86718432281516 190.3910590277778,105.7185696258208 196.57584635416669,105.7185696258208 C202.76063368055557,105.7185696258208 208.94542100694446,110.31751295094999 215.13020833333334,110.31751295094999 C221.31499565972223,110.31751295094999 227.49978298611111,99.70404230342633 233.6845703125,98.99064382512827 C239.86935763888889,98.27724534683021 246.0541449652778,97.80890189925606 252.23893229166669,97.80890189925606 C258.4237196180556,97.80890189925606 264.60850694444446,115.55764695626283 270.79329427083337,116.03253869768785 C276.97808159722223,116.50743043911288 283.16286892361114,116.77385330737809 289.34765625,116.77385330737809 C295.5324435763889,116.77385330737809 301.71723090277777,99.67826782033458 307.9020182291667,99.67826782033458 C314.0868055555556,99.67826782033458 320.27159288194446,112.3566918690216 326.45638020833337,112.3566918690216 C332.64116753472223,112.3566918690216 338.82595486111114,112.02516373585607 345.0107421875,111.68929597325065 C351.1955295138889,111.35342821064523 357.38031684027777,110.90183216475394 363.5651041666667,109.63399668493035 C369.7498914930556,108.36616120510676 375.93467881944446,84.17797508108582 382.11946614583337,84.17797508108582 C388.30425347222223,84.17797508108582 394.48904079861114,94.53076076341709 400.673828125,94.53076076341709 C406.8586154513889,94.53076076341709 413.04340277777777,73.4620627222233 419.2281901041667,73.4620627222233 C425.4129774305556,73.4620627222233 431.59776475694446,106.73221498100051 437.78255208333337,106.73221498100051 C443.96733940972223,106.73221498100051 450.15212673611114,79.76344757126915 456.3369140625,79.76344757126915 C462.5217013888889,79.76344757126915 468.70648871527777,106.72764789963081 474.8912760416667,107.12246048541942 C481.0760633680556,107.51727307120804 487.26085069444446,107.52600835218848 493.44563802083337,107.72778228557301 L493.44563802083337,120 " stroke-linecap="round" stroke-linejoin="round"></path>
+
+                <path :fill="`url(#ridgeline-gradient-${uid})`" :stroke="FINAL_CONFIG.style.ridgeline.color" stroke-width="1" d="M66.6953125,150 L66.6953125,150 C72.88009982638889,149.47795029840844 79.06488715277779,148.4338508952253 85.24967447916667,148.4338508952253 C91.43446180555556,148.4338508952253 97.61924913194446,149.78862806087534 103.80403645833334,149.78862806087534 C109.98882378472223,149.78862806087534 116.17361111111111,148.04072353168746 122.3583984375,146.60906937938194 C128.54318576388889,145.1774152270764 134.7279730902778,139.99324557351443 140.91276041666669,139.99324557351443 C147.09754774305557,139.99324557351443 153.28233506944446,149.97273754861985 159.46712239583334,149.97273754861985 C165.65190972222223,149.97273754861985 171.83669704861111,145.03376687065332 178.021484375,144.32772797689168 C184.20627170138889,143.62168908313004 190.3910590277778,143.8107253736048 196.57584635416669,143.02409560735822 C202.76063368055557,142.23746584111163 208.94542100694446,130.58782434985233 215.13020833333334,130.58782434985233 C221.31499565972223,130.58782434985233 227.49978298611111,149.11182283334733 233.6845703125,149.11182283334733 C239.86935763888889,149.11182283334733 246.0541449652778,146.61934000905183 252.23893229166669,146.61934000905183 C258.4237196180556,146.61934000905183 264.60850694444446,149.63856103727883 270.79329427083337,149.63856103727883 C276.97808159722223,149.63856103727883 283.16286892361114,120.24508280084818 289.34765625,120.24508280084818 C295.5324435763889,120.24508280084818 301.71723090277777,125.8060617486636 307.9020182291667,128.6125576296939 C314.0868055555556,131.4190535107242 320.27159288194446,133.74644461824312 326.45638020833337,137.08470876232406 C332.64116753472223,140.422972906405 338.82595486111114,149.32898535510793 345.0107421875,149.32898535510793 C351.1955295138889,149.32898535510793 357.38031684027777,145.03425137258355 363.5651041666667,140.55008414046353 C369.7498914930556,136.0659169083435 375.93467881944446,111.78284121111767 382.11946614583337,111.78284121111767 C388.30425347222223,111.78284121111767 394.48904079861114,113.0713199708892 400.673828125,114.79772539893028 C406.8586154513889,116.52413082697136 413.04340277777777,133.15608044416945 419.2281901041667,133.15608044416945 C425.4129774305556,133.15608044416945 431.59776475694446,125.48444339686912 437.78255208333337,120.24326995443076 C443.96733940972223,115.0020965119924 450.15212673611114,101.73324574781462 456.3369140625,100.14499087277113 C462.5217013888889,98.55673599772764 468.70648871527777,97.44223271035757 474.8912760416667,97.44223271035757 C481.0760633680556,97.44223271035757 487.26085069444446,132.1334233728692 493.44563802083337,149.479018704125 L493.44563802083337,150 " stroke-linecap="round" stroke-linejoin="round"></path>
+
+                <path :fill="`url(#ridgeline-gradient-${uid})`" :stroke="FINAL_CONFIG.style.ridgeline.color" stroke-width="1" d="M66.6953125,180 L66.6953125,180 C72.88009982638889,179.39605101103442 79.06488715277779,178.92730785819862 85.24967447916667,178.18815303310322 C91.43446180555556,177.44899820800782 97.61924913194446,175.33107571940982 103.80403645833334,175.33107571940982 C109.98882378472223,175.33107571940982 116.17361111111111,177.47366730075544 122.3583984375,177.47366730075544 C128.54318576388889,177.47366730075544 134.7279730902778,170.38775880855806 140.91276041666669,170.38775880855806 C147.09754774305557,170.38775880855806 153.28233506944446,171.4694838366037 159.46712239583334,172.41798939562977 C165.65190972222223,173.36649495465585 171.83669704861111,177.1729843832873 178.021484375,177.1729843832873 C184.20627170138889,177.1729843832873 190.3910590277778,174.7215709705521 196.57584635416669,172.5530222705251 C202.76063368055557,170.3844735704981 208.94542100694446,161.56078332389657 215.13020833333334,161.56078332389657 C221.31499565972223,161.56078332389657 227.49978298611111,171.1370681840353 233.6845703125,171.1370681840353 C239.86935763888889,171.1370681840353 246.0541449652778,170.88725102137704 252.23893229166669,170.45309201950832 C258.4237196180556,170.0189330176396 264.60850694444446,156.84700075078612 270.79329427083337,156.84700075078612 C276.97808159722223,156.84700075078612 283.16286892361114,174.0829766419065 289.34765625,174.0829766419065 C295.5324435763889,174.0829766419065 301.71723090277777,171.5781917260595 307.9020182291667,168.8920253992975 C314.0868055555556,166.2058590725355 320.27159288194446,153.43891051012255 326.45638020833337,150.88771611488693 C332.64116753472223,148.3365217196513 338.82595486111114,146.02799801023272 345.0107421875,146.02799801023272 C351.1955295138889,146.02799801023272 357.38031684027777,164.6350120745111 363.5651041666667,164.6350120745111 C369.7498914930556,164.6350120745111 375.93467881944446,140.42043513396675 382.11946614583337,137.9765300293455 C388.30425347222223,135.53262492472425 394.48904079861114,133.72620179898215 400.673828125,133.72620179898215 C406.8586154513889,133.72620179898215 413.04340277777777,141.64613191592866 419.2281901041667,141.64613191592866 C425.4129774305556,141.64613191592866 431.59776475694446,139.69953612312747 437.78255208333337,139.69953612312747 C443.96733940972223,139.69953612312747 450.15212673611114,169.39176477225985 456.3369140625,169.39176477225985 C462.5217013888889,169.39176477225985 468.70648871527777,166.8370171970348 474.8912760416667,163.2533085704992 C481.0760633680556,159.6695999439636 487.26085069444446,134.41776952349974 493.44563802083337,120 L493.44563802083337,180 " stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+        </template>
+
         <template v-if="type === 'historyPlot'">
             <svg :xmlns="XMLNS" width="100%" viewBox="0 0 612 512" :style="`background:${FINAL_CONFIG.style.backgroundColor}`">
                 <PackageVersion />
diff --git a/src/index.js b/src/index.js
index c04d397a..bdbe60e6 100755
--- a/src/index.js
+++ b/src/index.js
@@ -68,6 +68,7 @@ export const VueUiHistoryPlot = defineAsyncComponent(() => import('./components/
 export const VueUiPattern = defineAsyncComponent(() => import('./atoms/vue-ui-pattern.vue'))
 export const VueUiCirclePack = defineAsyncComponent(() => import('./components/vue-ui-circle-pack.vue'))
 export const VueUiWorld = defineAsyncComponent(() => import('./components/vue-ui-world.vue'))
+export const VueUiRidgeline = defineAsyncComponent(() => import('./components/vue-ui-ridgeline.vue'))
 export {
     abbreviate,
     createWordCloudDatasetFromPlainText,
diff --git a/src/lib.js b/src/lib.js
index d070e5c4..2e3379f6 100755
--- a/src/lib.js
+++ b/src/lib.js
@@ -2408,7 +2408,7 @@ export function createSmoothPathWithCuts(points) {
     return fullPath.trim();
 }
 
-export function createSmoothAreaSegments(points, zero, cut = false) {
+export function createSmoothAreaSegments(points, zero, cut = false, close = true) {
     function getSegments(points) {
         const segs = [];
         let curr = [];
@@ -2458,11 +2458,22 @@ export function createSmoothAreaSegments(points, zero, cut = false) {
             const controlY2 = y2 - m2 * (x2 - x1) / 3;
             d += ` C${controlX1},${controlY1} ${controlX2},${controlY2} ${x2},${y2}`;
         }
-        d += ` L${seg[n].x},${zero} Z`;
+        d += ` L${seg[n].x},${zero} ${close ? 'Z': ''}`;
         return d;
     }).filter(Boolean);
 }
 
+export function slugify(str) {
+    return str
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with -
+        .replace(/[^\w\-]+/g, '') // Remove all non-word chars
+        .replace(/\-\-+/g, '-') // Replace multiple - with single -
+        .replace(/^-+/, '') // Trim start
+        .replace(/-+$/, ''); // Trim end
+}
+
 
 const lib = {
     XMLNS,
@@ -2536,6 +2547,7 @@ const lib = {
     sanitizeArray,
     setOpacity,
     shiftHue,
+    slugify,
     sumByAttribute,
     sumSeries,
     themePalettes,
diff --git a/src/main.js b/src/main.js
index 88dcd799..81312eef 100755
--- a/src/main.js
+++ b/src/main.js
@@ -64,7 +64,8 @@ import {
     VueUiHistoryPlot,
     VueUiPattern,
     VueUiCirclePack,
-    VueUiWorld
+    VueUiWorld,
+    VueUiRidgeline
 } from 'vue-data-ui';
 import 'vue-data-ui/style.css';
 
@@ -132,5 +133,6 @@ app.component("VueUiHistoryPlot", VueUiHistoryPlot);
 app.component('VueUiPattern', VueUiPattern);
 app.component('VueUiCirclePack', VueUiCirclePack);
 app.component('VueUiWorld', VueUiWorld);
+app.component('VueUiRidgeline', VueUiRidgeline);
 
 app.mount('#app');
\ No newline at end of file
diff --git a/src/themes.json b/src/themes.json
index c5a42fe7..8b75a3d1 100755
--- a/src/themes.json
+++ b/src/themes.json
@@ -1,4 +1,736 @@
 {
+    "vue_ui_ridgeline": {
+        "default": {},
+        "celebration": {
+            "table": {
+                "th": {
+                    "backgroundColor":"#FFF8E1",
+                    "color": "#424242"
+                },
+                "td": {
+                    "backgroundColor":"#FFF8E1",
+                    "color": "#424242"
+                }
+            },
+            "style": {
+                "chart": {
+                    "backgroundColor":"#FFF8E1",
+                    "color": "#424242",
+                    "title": {
+                        "color": "#424242",
+                        "subtitle": {
+                            "color": "#757575"
+                            }
+                        },
+                    "areas": {
+                        "stroke": {
+                            "color": "#8F837A"
+                        }
+                    },
+                    "dialog": {
+                        "backgroundColor":"#FFF8E1",
+                        "color": "#424242",
+                        "header": {
+                            "backgroundColor":"#FFF8E1",
+                            "color": "#424242"
+                        },
+                        "xyChart": {
+                            "chart": {
+                                "backgroundColor":"#FFF8E1",
+                                "color": "#424242",
+                                "zoom": {
+                                    "color": "#5D4037",
+                                    "highlightColor": "#FF8A65",
+                                    "minimap": {
+                                        "selectedColor": "#FF8A65",
+                                        "lineColor": "#424242",
+                                        "indicatorColor": "#FF8A65"
+                                    }
+                                },
+                                "highlighter": {
+                                    "color": "#424242"
+                                },
+                                "timeTag": {
+                                    "backgroundColor":"#424242",
+                                    "color": "#FFF8E1",
+                                    "circleMarker": {
+                                        "color": "#424242"
+                                    }
+                                },
+                                "grid": {
+                                    "stroke": "#5D4037",
+                                    "showVerticalLines": false,
+                                    "labels": {
+                                        "color": "#424242",
+                                        "xAxisLabels": {
+                                            "color": "#424242"
+                                        },
+                                        "xAxis": {
+                                            "showBaseline": false
+                                        }
+                                    }
+                                },
+                                "legend": {
+                                    "color": "#424242"
+                                },
+                                "title": {
+                                    "color": "#424242",
+                                    "subtitle": {
+                                        "color": "#757575"
+                                    }
+                                },
+                                "tooltip": {
+                                    "backgroundColor": "#FFECB3",
+                                    "backgroundOpacity": 30,
+                                    "color": "#424242",
+                                    "borderColor": "#FF8A65"
+                                }
+                            },
+                            "bar": {
+                                "borderRadius": 2,
+                                "border": {
+                                    "stroke": "#FFF8E1"
+                                },
+                                "labels": {
+                                    "color": "#424242"
+                                },
+                                "serieName": {
+                                    "color": "#424242"
+                                }
+                            },
+                            "line": {
+                                "labels": {
+                                    "color": "#424242"
+                                }
+                            },
+                            "plot": {
+                                "labels": {
+                                    "color": "#424242"
+                                }
+                            },
+                            "table": {
+                                "th": {
+                                    "backgroundColor": "#FFF8E1",
+                                    "color": "#424242" 
+                                },
+                                "td": {
+                                    "backgroundColor": "#FFF8E1",
+                                    "color": "#424242" 
+                                }
+                            }
+                        }
+                    },
+                    "legend": {
+                        "backgroundColor":"#FFF8E1",
+                        "color": "#424242"
+                    },
+                    "selector": {
+                        "stroke": "#FF8A65",
+                        "dot": {
+                            "fill": "#424242",
+                            "stroke": "#FFF8E1"
+                        },
+                        "labels": {
+                            "color": "#424242"
+                        }
+                    },
+                    "xAxis": {
+                        "labels": {
+                            "color": "#424242"
+                        }
+                    },
+                    "yAxis": {
+                        "labels": {
+                            "color": "#424242"
+                        }
+                    },
+                    "zeroLine": {
+                        "stroke": "#5D4037"
+                    }
+                }
+            }
+        },
+        "celebrationNight": {
+            "table": {
+                "th": {
+                    "backgroundColor":"#FFF8E1",
+                    "color": "#424242"
+                },
+                "td": {
+                    "backgroundColor":"#FFF8E1",
+                    "color": "#424242"
+                }
+            },
+            "style": {
+                "chart": {
+                    "backgroundColor":"#1E1E1E",
+                    "color": "#BDBDBD",
+                    "title": {
+                        "color": "#FFF8E1",
+                        "subtitle": {
+                            "color": "#BDBDBD"
+                        }
+                    },
+                    "areas": {
+                        "stroke": {
+                            "color": "#8F837A"
+                        }
+                    },
+                    "dialog": {
+                        "backgroundColor":"#1E1E1E",
+                        "color": "#BDBDBD",
+                        "header": {
+                            "backgroundColor":"#1E1E1E",
+                            "color": "#BDBDBD"
+                        },
+                        "xyChart": {
+                            "chart": {
+                                "backgroundColor":"#1E1E1E",
+                                "color": "#BDBDBD",
+                                "zoom": {
+                                    "color": "#5D4037",
+                                    "highlightColor": "#FF8A65",
+                                    "minimap": {
+                                        "selectedColor": "#FF8A65",
+                                        "lineColor": "#FF6B6B",
+                                        "indicatorColor": "#FF8A65"
+                                    }
+                                },
+                                "highlighter": {
+                                    "color": "#FFF8E1"
+                                },
+                                "timeTag": {
+                                    "backgroundColor":"#5D4037",
+                                    "color": "#FFF8E1",
+                                    "circleMarker": {
+                                        "color": "#5D4037"
+                                    }
+                                },
+                                "grid": {
+                                    "stroke": "#5D4037",
+                                    "showVerticalLines": false,
+                                    "labels": {
+                                        "color": "#BDBDBD",
+                                        "xAxisLabels": {
+                                            "color": "#BDBDBD"
+                                        },
+                                        "xAxis": {
+                                            "showBaseline": false
+                                        }
+                                    }
+                                },
+                                "legend": {
+                                    "color": "#BDBDBD"
+                                },
+                                "title": {
+                                    "color": "#FFF8E1",
+                                    "subtitle": {
+                                        "color": "#BDBDBD"
+                                    }
+                                },
+                                "tooltip": {
+                                    "backgroundColor": "#1E1E1E",
+                                    "backgroundOpacity": 30,
+                                    "color": "#FFF8E1",
+                                    "borderColor": "#FF8A65"
+                                }
+                            },
+                            "bar": {
+                                "borderRadius": 2,
+                                "border": {
+                                    "stroke": "#1E1E1E"
+                                },
+                                "labels": {
+                                    "color": "#BDBDBD"
+                                },
+                                "serieName": {
+                                    "color": "#BDBDBD"
+                                }
+                            },
+                            "line": {
+                                "labels": {
+                                    "color": "#BDBDBD"
+                                }
+                            },
+                            "plot": {
+                                "labels": {
+                                    "color": "#BDBDBD"
+                                }
+                            },
+                            "table": {
+                                "th": {
+                                    "backgroundColor": "#1E1E1E",
+                                    "color": "#BDBDBD" 
+                                },
+                                "td": {
+                                    "backgroundColor": "#1E1E1E",
+                                    "color": "#BDBDBD" 
+                                }
+                            }
+                        }
+                    },
+                    "legend": {
+                        "backgroundColor":"#1E1E1E",
+                        "color": "#BDBDBD"
+                    },
+                    "selector": {
+                        "stroke": "#FF8A65",
+                        "dot": {
+                            "fill": "#424242",
+                            "stroke": "#1E1E1E"
+                        },
+                        "labels": {
+                            "color": "#BDBDBD"
+                        }
+                    },
+                    "xAxis": {
+                        "labels": {
+                            "color": "#BDBDBD"
+                        }
+                    },
+                    "yAxis": {
+                        "labels": {
+                            "color": "#BDBDBD"
+                        }
+                    },
+                    "zeroLine": {
+                        "stroke": "#5D4037"
+                    }
+                }
+            }
+        },
+        "hack": {
+            "table": {
+                "th": {
+                    "backgroundColor": "#1A1A1A",
+                    "color": "#99AA99" 
+                },
+                "td": {
+                    "backgroundColor": "#1A1A1A",
+                    "color": "#AACCAA" 
+                }
+            },
+            "style": {
+                "chart": {
+                    "backgroundColor":"#1A1A1A",
+                    "color": "#99AA99",
+                    "title": {
+                        "color": "#66CC66",
+                        "subtitle": {
+                            "color": "#99AA99"
+                        }
+                    },
+                    "areas": {
+                        "stroke": {
+                            "color": "#66CC66"
+                        }
+                    },
+                    "dialog": {
+                        "backgroundColor":"#1A1A1A",
+                        "color": "#99AA99",
+                        "header": {
+                            "backgroundColor":"#1A1A1A",
+                            "color": "#99AA99"
+                        },
+                        "xyChart": {
+                            "chart": {
+                                "backgroundColor":"#1A1A1A",
+                                "color": "#99AA99",
+                                "zoom": {
+                                    "color": "#5F6A5F",
+                                    "highlightColor": "#66CC66"
+                                },
+                                "highlighter": {
+                                    "color": "#66CC66"
+                                },
+                                "timeTag": {
+                                    "backgroundColor":"#1A1A1A",
+                                    "color": "#66CC66",
+                                    "circleMarker": {
+                                        "color": "#66CC66"
+                                    }
+                                },
+                                "grid": {
+                                    "stroke": "#5F6A5F",
+                                    "showVerticalLines": false,
+                                    "labels": {
+                                        "color": "#99AA99",
+                                        "xAxisLabels": {
+                                            "color": "#99AA99"
+                                        },
+                                        "xAxis": {
+                                            "showBaseline": false
+                                        }
+                                    }
+                                },
+                                "legend": {
+                                    "color": "#99AA99"
+                                },
+                                "title": {
+                                    "color": "#66CC66",
+                                    "subtitle": {
+                                        "color": "#99AA99"
+                                    }
+                                },
+                                "tooltip": {
+                                    "backgroundColor": "#2A2F2A",
+                                    "color": "#AACCAA",
+                                    "borderColor": "#66CC66"
+                                }
+                            },
+                            "bar": {
+                                "borderRadius": 0,
+                                "border": {
+                                    "stroke": "#66CC66"
+                                },
+                                "labels": {
+                                    "color": "#AACCAA"
+                                },
+                                "serieName": {
+                                    "color": "#99CC99"
+                                }
+                            },
+                            "line": {
+                                "labels": {
+                                    "color": "#AACCAA"
+                                }
+                            },
+                            "plot": {
+                                "labels": {
+                                    "color": "#AACCAA"
+                                }
+                            },
+                            "table": {
+                                "th": {
+                                    "backgroundColor": "#1A1A1A",
+                                    "color": "#99AA99" 
+                                },
+                                "td": {
+                                    "backgroundColor": "#1A1A1A",
+                                    "color": "#AACCAA" 
+                                }
+                            }
+                        }
+                    },
+                    "legend": {
+                        "backgroundColor":"#1A1A1A",
+                        "color": "#99AA99"
+                    },
+                    "selector": {
+                        "stroke": "#99AA99",
+                        "dot": {
+                            "fill": "#4A4A4A",
+                            "stroke": "#1A1A1A"
+                        },
+                        "labels": {
+                            "color": "#99AA99"
+                        }
+                    },
+                    "xAxis": {
+                        "labels": {
+                            "color": "#99AA99"
+                        }
+                    },
+                    "yAxis": {
+                        "labels": {
+                            "color": "#99AA99"
+                        }
+                    },
+                    "zeroLine": {
+                        "stroke": "#2A2A2A"
+                    }
+                }
+            }
+        },
+        "zen": {
+            "table": {
+                "th": {
+                    "backgroundColor": "#fbfafa",
+                    "color": "#8A9892"
+                },
+                "td": {
+                    "backgroundColor": "#fbfafa",
+                    "color": "#8A9892" 
+                }
+            },
+            "style": {
+                "chart": {
+                    "backgroundColor": "#fbfafa",
+                    "color": "#8A9892",
+                    "title": {
+                        "color": "#8A9892",
+                        "subtitle": {
+                            "color": "#99AA99"
+                        }
+                    },
+                    "areas": {
+                        "stroke": {
+                            "color": "#8F837A"
+                        }
+                    },
+                    "dialog": {
+                        "backgroundColor": "#fbfafa",
+                        "color": "#8A9892",
+                        "header": {
+                            "backgroundColor": "#fbfafa",
+                            "color": "#8A9892"
+                        },
+                        "xyChart": {
+                            "chart": {
+                                "backgroundColor": "#fbfafa",
+                                "color": "#8A9892",
+                                "zoom": {
+                                    "color": "#E0CFC3",
+                                    "highlightColor": "#8F837A"
+                                },
+                                "highlighter": {
+                                    "color": "#8F837A"
+                                },
+                                "timeTag": {
+                                    "backgroundColor":"#fbfafa",
+                                    "color": "#8A9892",
+                                    "circleMarker": {
+                                        "color": "#8A9892"
+                                    }
+                                },
+                                "grid": {
+                                    "stroke": "transparent",
+                                    "labels": {
+                                        "show": false,
+                                        "color": "#99AA99",
+                                        "xAxisLabels": {
+                                            "show": false,
+                                            "color": "#99AA99"
+                                        },
+                                        "zeroLine": {
+                                            "show": false
+                                        },
+                                        "yAxis": {
+                                            "showBaseline": false
+                                        }
+                                    }
+                                },
+                                "legend": {
+                                    "backgroundColor": "#fbfafa",
+                                    "color": "#99AA99"
+                                },
+                                "title": {
+                                    "color": "#8A9892",
+                                    "subtitle": {
+                                        "color": "#99AA99"
+                                    }
+                                },
+                                "tooltip": {
+                                    "backgroundColor": "#fbfafa",
+                                    "color": "#8A9892"
+                                }
+                            },
+                            "bar": {
+                                "borderRadius": 4,
+                                "border": {
+                                    "stroke": "#D7E0D2"
+                                },
+                                "labels": {
+                                    "color": "#8F837A"
+                                },
+                                "serieName": {
+                                    "color": "#858480"
+                                }
+                            },
+                            "line": {
+                                "labels": {
+                                    "color": "#8F837A"
+                                }
+                            },
+                            "plot": {
+                                "labels": {
+                                    "color": "#8F837A"
+                                }
+                            },
+                            "table": {
+                                "th": {
+                                    "backgroundColor": "#fbfafa",
+                                    "color": "#8F837A" 
+                                },
+                                "td": {
+                                    "backgroundColor": "#fbfafa",
+                                    "color": "#8F837A" 
+                                }
+                            }
+                        }
+                    },
+                    "legend": {
+                        "backgroundColor": "#fbfafa",
+                        "color": "#8A9892"
+                    },
+                    "selector": {
+                        "stroke": "#8F837A",
+                        "dot": {
+                            "fill": "#8F837A",
+                            "stroke": "#fbfafa"
+                        },
+                        "labels": {
+                            "color": "#8F837A"
+                        }
+                    },
+                    "xAxis": {
+                        "labels": {
+                            "color": "#8F837A"
+                        }
+                    },
+                    "yAxis": {
+                        "labels": {
+                            "color": "#8F837A"
+                        }
+                    },
+                    "zeroLine": {
+                        "stroke": "#8F837A"
+                    }
+                }
+            }
+        },
+        "concrete": {
+            "table": {
+                "th": {
+                    "backgroundColor": "#fbfafa",
+                    "color": "#8A9892"
+                },
+                "td": {
+                    "backgroundColor": "#fbfafa",
+                    "color": "#8A9892" 
+                }
+            },
+            "style": {
+                "chart": {
+                    "backgroundColor":"#f6f6fb",
+                    "color": "#50606C",
+                    "title": {
+                        "color": "#50606C",
+                        "subtitle": {
+                            "color": "#718890"
+                        }
+                    },
+                    "areas": {
+                        "stroke": {
+                            "color": "#829C98"
+                        }
+                    },
+                    "dialog": {
+                        "backgroundColor":"#f6f6fb",
+                        "color": "#50606C",
+                        "header": {
+                            "backgroundColor":"#f6f6fb",
+                            "color": "#50606C"
+                        },
+                        "xyChart": {
+                            "chart": {
+                                "backgroundColor":"#f6f6fb",
+                                "color": "#50606C",
+                                "zoom": {
+                                    "color": "#92B0AB",
+                                    "highlightColor": "#50606C"
+                                },
+                                "highlighter": {
+                                    "color": "#7DA9B5"
+                                },
+                                "timeTag": {
+                                    "backgroundColor":"#f6f6fb",
+                                    "color": "#50606C",
+                                    "circleMarker": {
+                                        "color": "#50606C"
+                                    }
+                                },
+                                "grid": {
+                                    "stroke": "#829C98",
+                                    "showVerticalLines": true,
+                                    "showHorizontalLines": true,
+                                    "labels": {
+                                        "color": "#50606C",
+                                        "xAxisLabels": {
+                                            "color": "#50606C"
+                                        }
+                                    }
+                                },
+                                "legend": {
+                                    "backgroundColor": "#f6f6fb",
+                                    "color": "#61747E"
+                                },
+                                "title": {
+                                    "color": "#50606C",
+                                    "subtitle": {
+                                        "color": "#718890"
+                                    }
+                                },
+                                "tooltip": {
+                                    "backgroundColor": "#f6f6fb",
+                                    "color": "#50606C"
+                                }
+                            },
+                            "bar": {
+                                "borderRadius": 2,
+                                "border": {
+                                    "stroke": "#404C4D"
+                                },
+                                "labels": {
+                                    "color": "#50606C"
+                                },
+                                "serieName": {
+                                    "color": "#61747E"
+                                }
+                            },
+                            "line": {
+                                "labels": {
+                                    "color": "#50606C"
+                                }
+                            },
+                            "plot": {
+                                "labels": {
+                                    "color": "#50606C"
+                                }
+                            },
+                            "table": {
+                                "th": {
+                                    "backgroundColor": "#f6f6fb",
+                                    "color": "#50606C" 
+                                },
+                                "td": {
+                                    "backgroundColor": "#f6f6fb",
+                                    "color": "#50606C" 
+                                }
+                            }
+                        }
+                    },
+                    "legend": {
+                        "backgroundColor":"#f6f6fb",
+                        "color": "#50606C"
+                    },
+                    "selector": {
+                        "stroke": "#7DA9B5",
+                        "dot": {
+                            "fill": "#7DA9B5",
+                            "stroke": "#f6f6fb"
+                        },
+                        "labels": {
+                            "color": "#50606C"
+                        }
+                    },
+                    "xAxis": {
+                        "labels": {
+                            "color": "#50606C"
+                        }
+                    },
+                    "yAxis": {
+                        "labels": {
+                            "color": "#50606C"
+                        }
+                    },
+                    "zeroLine": {
+                        "stroke": "#829C98"
+                    }
+                }
+            }
+        }
+    },
     "vue_ui_circle_pack": {
         "default": {},
         "celebration": {
diff --git a/src/useConfig.js b/src/useConfig.js
index 0f1ba44b..2b7ef5f4 100755
--- a/src/useConfig.js
+++ b/src/useConfig.js
@@ -373,6 +373,7 @@ export function useConfig() {
         }
     }
 
+    // NOTE: Any update to this config will be reflected in VueUiRidgeline, which uses VueUiXy in its dialog.
     const vue_ui_xy = {
         theme: '',
         responsive: false,
@@ -4385,6 +4386,9 @@ export function useConfig() {
             color: COLOR_BLACK,
             maxHeight: 500,
             animated: true,
+            ridgeline: {
+                color: COLOR_GREY_LIGHT
+            },
             circlePack: {
                 color: COLOR_GREY_LIGHT
             },
@@ -5342,6 +5346,158 @@ export function useConfig() {
         },
     }
 
+    const vue_ui_ridgeline = {
+        theme: '',
+        customPalette: [],
+        responsive: false,
+        userOptions: USER_OPTIONS({
+            tooltip: false,
+            pdf: true,
+            csv: true,
+            img: true,
+            table: true,
+            labels: false,
+            fullscreen: true,
+            stack: false,
+            annotator: true
+        }),
+        table: {
+            ...TABLE,
+            th: TABLE_TH,
+            td: {
+                ...TABLE_TD,
+                roundingValue: 0
+            },
+            columnNames: {
+                series: 'Series',
+            }
+        },
+        style: {
+            fontFamily: 'inherit',
+            chart: {
+                backgroundColor: COLOR_WHITE,
+                color: COLOR_BLACK,
+                padding: PADDING([12, 0, 0, 12]),
+                title: TITLE,
+                legend: LEGEND,
+                dialog: {
+                    show: true,
+                    backgroundColor: COLOR_WHITE,
+                    color: COLOR_BLACK,
+                    header: {
+                        backgroundColor: COLOR_GREY_LIGHT,
+                        color: COLOR_BLACK
+                    },
+                    xyChart: {
+                        ...vue_ui_xy,
+                        responsive: true,
+                        line: {
+                            ...vue_ui_xy.line,
+                            labels: {
+                                ...vue_ui_xy.line.labels,
+                                show: true
+                            }
+                        },
+                        chart: {
+                            ...vue_ui_xy.chart,
+                            padding: {
+                                top: 24,
+                                right: 25,
+                                bottom: 24,
+                                left: 64
+                            },
+                            tooltip: {
+                                ...vue_ui_xy.chart.tooltip,
+                                showPercentage: false
+                            },
+                            userOptions: {
+                                ...vue_ui_xy.chart.userOptions,
+                                buttons: {
+                                    ...vue_ui_xy.chart.userOptions.buttons,
+                                    pdf: false,
+                                }
+                            },
+                            zoom: {
+                                ...vue_ui_xy.chart.zoom,
+                                minimap: {
+                                    ...vue_ui_xy.chart.zoom.minimap,
+                                    show: true,
+                                }
+                            }
+                        }
+                    }
+                },
+                areas: {
+                    height: 60, // height > rowHeight results in the classic ridgeline look
+                    rowHeight: 30,
+                    strokeWidth: 1,
+                    stroke: {
+                        useSerieColor: false,
+                        color: COLOR_WHITE,
+                    },
+                    smooth: true, // Also applied in dialog chart
+                    opacity: 0.9,
+                    maxPoint: {
+                        show: true,
+                        adaptStrokeToBackground: true,
+                        stroke: COLOR_BLACK,
+                        strokeWidth: 1,
+                        strokeDasharray: 4,
+                    },
+                },
+                selector: {
+                    show: true,
+                    stroke: COLOR_GREY_MID,
+                    strokeWidth: 1,
+                    strokeDasharray: 2,
+                    labels: {
+                        fontSize: 12,
+                        formatter: null,
+                        rounding: 0,
+                        color: COLOR_BLACK,
+                    },
+                    dot: {
+                        radius: 4,
+                        useDatapointColor: true,
+                        fill: COLOR_GREY_MID,
+                        stroke: COLOR_WHITE,
+                        strokeWidth: 0.5
+                    },
+                },
+                zeroLine: {
+                    show: true,
+                    strokeWidth: 1,
+                    strokeDasharray: 0,
+                    useSerieColor: false,
+                    stroke: COLOR_GREY_MID
+                },
+                xAxis: {
+                    labels: {
+                        prefix: '',
+                        suffix: '',
+                        rotation: 0,
+                        values: [],
+                        color: COLOR_BLACK,
+                        fontSize: 14,
+                        bold: false,
+                        showOnlyAtModulo: false,
+                        modulo: 12,
+                        showOnlyFirstAndLast: false,
+                        offsetY: 0,
+                    }
+                },
+                yAxis: {
+                    labels: {
+                        fontSize: 16,
+                        bold: false,
+                        color: COLOR_BLACK,
+                        offsetX: 0
+                    }
+                }
+            }
+        }
+    }
+
     return {
         vue_ui_xy,
         vue_ui_donut,
@@ -5391,6 +5547,7 @@ export function useConfig() {
         vue_ui_funnel,
         vue_ui_history_plot,
         vue_ui_world,
+        vue_ui_ridgeline,
         // non chart components
         vue_ui_cursor,
         vue_ui_accordion,
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index 4f03c118..de4a55ca 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -57,7 +57,8 @@ declare module "vue-data-ui" {
         | VueUiFunnelDatasetItem[]
         | VueUiHistoryPlotDatasetItem[]
         | VueUiCirclePackDatasetItem[]
-        | VueUiWorldDataset;
+        | VueUiWorldDataset
+        | VueUiRidgelineDatasetItem[];
         config?:
         | VueUi3dBarConfig
         | VueUiAgePyramidConfig
@@ -115,7 +116,8 @@ declare module "vue-data-ui" {
         | VueUiFunnelConfig
         | VueUiHistoryPlotConfig
         | VueUiCirclePackConfig
-        | VueUiWorldConfig;
+        | VueUiWorldConfig
+        | VueUiRidgelineConfig;
     }>;
 
     export type VueUiPatternName =
@@ -1163,7 +1165,9 @@ declare module "vue-data-ui" {
         | "curlyBrackets"
         | "curlySpread"
         | "text"
-        | "world";
+        | "world"
+        | "eye"
+        | "chartRidgeline";
 
     export const VueUiIcon: DefineComponent<{
         name: VueUiIconName;
@@ -4723,12 +4727,16 @@ declare module "vue-data-ui" {
         | "flow"
         | "bullet"
         | "historyPlot"
-        | "circlePack";
+        | "circlePack"
+        | "ridgeline";
         style?: {
             backgroundColor?: string;
             color?: string;
             animated?: boolean;
             maxHeight?: number;
+            ridgeline?: {
+                color?: string;
+            };
             circlePack?: {
                 color?: string;
             };
@@ -6782,6 +6790,129 @@ declare module "vue-data-ui" {
         dataset?: VueUiWorldDataset
     }>
 
+    export type VueUiRidgelineDatapoint = {
+        name: string;
+        values: number[];
+        color?: string;
+    }
+
+    export type VueUiRidgelineDatasetItem = {
+        name: string;
+        datapoints: VueUiRidgelineDatapoint[]
+    }
+
+    export type VueUiRidgelineConfig = {
+        theme?: Theme;
+        customPalette?: string[];
+        responsive?: boolean;
+        userOptions?: ChartUserOptions;
+        table?: {
+            show?: boolean;
+            responsiveBreakpoint?: number;
+            th?: ChartTableCell;
+            td?: ChartTableCell & {
+                roundingValue?: number;
+            };
+            columnNames?: {
+                series?: string;
+            };
+        };
+        style?: {
+            fontFamily?: string;
+            chart?: {
+                backgroundColor?: string;
+                color?: string;
+                padding?: ChartPadding;
+                title?: ChartTitle;
+                legend?: ChartBaseLegend & {
+                    backgroundColor?: string;
+                };
+                dialog?: {
+                    show?: boolean;
+                    backgroundColor?: string;
+                    color?: string;
+                    header?: {
+                        backgroundColor?: string;
+                        color?: string;
+                    };
+                    xyChart?: VueUiXyConfig;
+                };
+                areas?: {
+                    height?: number;
+                    rowHeight?: number;
+                    strokeWidth?: number;
+                    stroke?: {
+                        useSerieColor?: boolean;
+                        color?: string;
+                    };
+                    smooth?: boolean;
+                    opacity?: number;
+                    maxPoint?: {
+                        show?: boolean;
+                        adaptStrokeToBackground?: boolean;
+                        stroke?: string;
+                        strokeWidth?: number;
+                        strokeDasharray?: number;
+                    };
+                };
+                selector?: {
+                    show?: boolean;
+                    stroke?: string;
+                    strokeWidth?: number;
+                    strokeDasharray?: number;
+                    labels?: {
+                        fontSize?: number;
+                        formatter?: Formatter;
+                        rounding?: number;
+                        color?: string;
+                    };
+                    dot?: {
+                        radius?: number;
+                        useDatapointColor?: boolean;
+                        fill?: string;
+                        stroke?: string;
+                        strokeWidth?: number;
+                    };
+                };
+                zeroLine?: {
+                    show?: boolean;
+                    strokeWidth?:number;
+                    strokeDasharray?: number;
+                    useSerieColor?: boolean;
+                    stroke?: string;
+                };
+                xAxis?: {
+                    labels?: {
+                        prefix?: string;
+                        suffix?: string;
+                        rotation?: number;
+                        values?: string[];
+                        color?: string;
+                        fontSize?: number;
+                        bold?: boolean;
+                        showOnlyAtModulo?: boolean;
+                        modulo?: number;
+                        showOnlyFirstAndLast?: boolean;
+                        offsetY?: number;
+                    };
+                };
+                yAxis?: {
+                    labels?: {
+                        fontSize?: number;
+                        bold?: number;
+                        color?: string;
+                        offsetX?: number;
+                    };
+                };
+            };
+        };
+    };
+
+    export const VueUiRidgeline: DefineComponent<{
+        config?: VueUiRidgelineConfig;
+        dataset: VueUiRidgelineDatasetItem[]
+    }>
+
     export type VueDataUiConfig =
         | VueUi3dBarConfig
         | VueUiAgePyramidConfig
@@ -6841,7 +6972,8 @@ declare module "vue-data-ui" {
         | VueUiFunnelConfig
         | VueUiHistoryPlotConfig
         | VueUiCirclePackConfig
-        | VueUiWorldConfig;
+        | VueUiWorldConfig
+        | VueUiRidgelineConfig;
 
     export type VueDataUiConfigKey =
         | "vue_ui_3d_bar"
@@ -6902,13 +7034,13 @@ declare module "vue-data-ui" {
         | "vue_ui_funnel"
         | "vue_ui_history_plot"
         | "vue_ui_circle_pack"
-        | "vue_ui_world";
+        | "vue_ui_world"
+        | "vue_ui_ridgeline";
 
     export type VueDataUiWordCloudTransformCallback =
         | ((word: string) => string)
         | null;
 
-
     export type Point = {
         [key: string]: any
         x: number

From c84546a9cf997a2914968635ad1b32bb4f7286e5 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 11:47:52 +0200
Subject: [PATCH 03/17] 2.9.7-beta.0

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

diff --git a/package-lock.json b/package-lock.json
index d91fa086..0d6abe48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.9.6",
+  "version": "2.9.7-beta.0",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.9.6",
+      "version": "2.9.7-beta.0",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index fcb06cb3..e00ca3e3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.9.6",
+  "version": "2.9.7-beta.0",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
\ No newline at end of file
+}

From 8c5c9faf1edcc834857da449363d9683e2d7bc94 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 17:08:09 +0200
Subject: [PATCH 04/17] Improvement - VueUiRidgeline - Allow individual
 datapoint colors

---
 TestingArena/ArenaVueUiRidgeline.vue | 23 ++++++++++++++++++++++-
 package.json                         |  2 +-
 src/components/vue-ui-ridgeline.vue  | 23 ++++++++++++++++++++---
 src/useConfig.js                     |  1 +
 types/vue-data-ui.d.ts               |  1 +
 5 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/TestingArena/ArenaVueUiRidgeline.vue b/TestingArena/ArenaVueUiRidgeline.vue
index 7f7ca802..a4c3878e 100644
--- a/TestingArena/ArenaVueUiRidgeline.vue
+++ b/TestingArena/ArenaVueUiRidgeline.vue
@@ -47,7 +47,27 @@ function makeDataset(n) {
     return arr;
 }
 
-const dataset = ref(makeDataset(5));
+// const dataset = ref(makeDataset(5));
+
+const dataset = ref([
+  { name: 'Moscow', datapoints: [{ color: '#ff3700', name: 'Average Monthly Temperature (°C)', values: [-7, -6, 0, 8, 15, 18, 20, 18, 13, 7, 1, -4] }] },       // Mean ≈ 7°C
+  { name: 'Chicago', datapoints: [{ color: '#6376DD', name: 'Average Monthly Temperature (°C)', values: [-4, -2, 3, 10, 16, 22, 24, 23, 19, 12, 5, -1] }] }, // Mean ≈ 10°C
+  { name: 'Toronto', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [-3, -2, 2, 9, 15, 20, 22, 21, 17, 10, 4, -1] }] }, // Mean ≈ 9°C
+  { name: 'Berlin', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [0, 2, 6, 12, 16, 19, 21, 21, 17, 12, 7, 3] }] },     // Mean ≈ 12°C
+  { name: 'Beijing', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [-3, 0, 6, 14, 20, 24, 26, 25, 20, 13, 5, -1] }] },  // Mean ≈ 12°C
+  { name: 'London', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [5, 6, 8, 11, 15, 18, 20, 20, 17, 13, 9, 6] }] },     // Mean ≈ 13°C
+  { name: 'Paris', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [5, 6, 9, 12, 16, 19, 21, 21, 18, 13, 8, 5] }] },      // Mean ≈ 13°C
+  { name: 'San Francisco', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [11, 12, 13, 13, 14, 15, 15, 16, 17, 16, 14, 12] }] }, // Mean ≈ 14°C
+  { name: 'New York', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [0, 2, 7, 13, 18, 24, 27, 26, 22, 15, 9, 3] }] },   // Mean ≈ 13°C
+  { name: 'Milan', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [3, 5, 9, 14, 18, 22, 24, 24, 20, 15, 8, 4] }] },      // Mean ≈ 13°C
+  { name: 'Madrid', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [6, 8, 11, 13, 17, 22, 26, 25, 21, 15, 10, 7] }] },   // Mean ≈ 15°C
+  { name: 'Rome', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [8, 9, 11, 14, 18, 22, 25, 25, 22, 17, 12, 9] }] },     // Mean ≈ 16°C
+  { name: 'Seoul', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [-2, 0, 5, 12, 17, 21, 25, 26, 21, 15, 7, 1] }] },     // Mean ≈ 13°C
+  { name: 'Tokyo', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [5, 6, 9, 15, 19, 22, 26, 27, 24, 18, 13, 8] }] },     // Mean ≈ 16°C
+  { name: 'Los Angeles', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [14, 15, 15, 17, 18, 20, 22, 22, 22, 19, 16, 13] }] }, // Mean ≈ 18°C
+  { name: 'Istanbul', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [6, 6, 8, 12, 16, 21, 23, 23, 20, 16, 12, 8] }] },  // Mean ≈ 14°C
+  { name: 'Mexico City', datapoints: [{ name: 'Average Monthly Temperature (°C)', values: [13, 14, 15, 16, 16, 16, 15, 15, 15, 14, 13, 13] }] }, // Mean ≈ 15°C
+]);
 
 const model = ref([
     { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
@@ -80,6 +100,7 @@ const model = ref([
     { key: 'style.chart.areas.stroke.color', def: '#FFFFFF', type: 'color'},
     { key: 'style.chart.areas.smooth', def: true, type: 'checkbox'},
     { key: 'style.chart.areas.opacity', def: 0.9, min: 0.1, max: 1, step: 0.01, type: 'number'},
+    { key: 'style.chart.areas.useCommonColor', def: false, type: 'checkbox'},
     
     { key: 'style.chart.areas.maxPoint.show', def: true, type: 'checkbox'},
     { key: 'style.chart.areas.maxPoint.adaptStrokeToBackground', def: true, type: 'checkbox'},
diff --git a/package.json b/package.json
index e00ca3e3..8d7a7346 100644
--- a/package.json
+++ b/package.json
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index f037d534..81bc58ec 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -254,6 +254,7 @@ const formattedDataset = computed(() => {
             uid: createUid(),
             datapoints: ds.datapoints.map((dp, j) => {
                 const color = dp.color ? convertColorToHex(dp.color) : customPalette.value[j] || palette[j] || palette[j % palette.length];
+                console.log(color);
                 const id = slugify(dp.name);
                 return {
                     ...dp,
@@ -390,6 +391,7 @@ const drawableDataset = computed(() => {
 
                     return {
                         ...dp,
+                        uid: createUid(),
                         plots,
                         smoothPath,
                         straightPath,
@@ -730,17 +732,32 @@ defineExpose({
                     <stop offset="70%" :stop-color="dp.color" stop-opacity="0.3" />
                     <stop offset="100%" :stop-color="dp.color" stop-opacity="0.1" />
                 </linearGradient>
+
+                <template v-for="(ds, i) in drawableDataset">
+                    <linearGradient 
+                        v-for="(dp, j) in ds.datapoints" 
+                        :key="`grad${dp.id}`"
+                        :id="`gradient-single-${uid}-${dp.uid}`"
+                        x1="50%" y1="0%" x2="50%"
+                        y2="100%">
+                        <stop offset="0%" :stop-color="dp.color" stop-opacity="1" />
+                        <stop offset="30%" :stop-color="dp.color" stop-opacity="0.7" />
+                        <stop offset="70%" :stop-color="dp.color" stop-opacity="0.3" />
+                        <stop offset="100%" :stop-color="dp.color" stop-opacity="0.1" />
+                    </linearGradient>
+                </template>
             </defs>
 
+
             <g v-if="$slots.pattern">
                 <defs v-for="(variable, i) in legendSet">
                     <slot name="pattern" v-bind="{variable, patternId: `pattern_${uid}_${i}`}"/>
                 </defs>
             </g>
 
-            <g v-for="(ds, i) in drawableDataset">
+            <g v-for="(ds, i) in drawableDataset" :key="`ds-${i}`">
                 <!-- Paths -->
-                <g v-for="(dp, j) in ds.datapoints">
+                <g v-for="(dp, j) in ds.datapoints" :key="dp.id">
                     <!-- PATH BACKGROUND -->
                     <path 
                         :fill="FINAL_CONFIG.style.chart.backgroundColor" 
@@ -752,7 +769,7 @@ defineExpose({
 
                     <!-- PATH -->
                     <path 
-                        :fill="`url(#gradient-${dp.id}-${uid})`"
+                        :fill="FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
                         :stroke="FINAL_CONFIG.style.chart.areas.stroke.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.areas.stroke.color"
                         :stroke-width="FINAL_CONFIG.style.chart.areas.strokeWidth" 
                         :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath"
diff --git a/src/useConfig.js b/src/useConfig.js
index 2b7ef5f4..5d8a165c 100755
--- a/src/useConfig.js
+++ b/src/useConfig.js
@@ -5437,6 +5437,7 @@ export function useConfig() {
                     },
                     smooth: true, // Also applied in dialog chart
                     opacity: 0.9,
+                    useCommonColor: false,
                     maxPoint: {
                         show: true,
                         adaptStrokeToBackground: true,
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index de4a55ca..cd77f7dd 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -6841,6 +6841,7 @@ declare module "vue-data-ui" {
                     height?: number;
                     rowHeight?: number;
                     strokeWidth?: number;
+                    useCommonColor?: boolean;
                     stroke?: {
                         useSerieColor?: boolean;
                         color?: string;

From 8681394e76a760447426e9de5542db281af4af71 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 17:08:19 +0200
Subject: [PATCH 05/17] 2.9.7-beta.1

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

diff --git a/package-lock.json b/package-lock.json
index 0d6abe48..3839c6b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.9.7-beta.0",
+  "version": "2.9.7-beta.1",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.9.7-beta.0",
+      "version": "2.9.7-beta.1",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index 8d7a7346..7960719d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.9.7-beta.0",
+  "version": "2.9.7-beta.1",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
\ No newline at end of file
+}

From f409797997db63b7694a2fe7e915f52459312aa2 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 17:59:23 +0200
Subject: [PATCH 06/17] Fix - VueUiRidgeline - Fix issue with null values in
 nested VueUiXy config

---
 package.json                        |  2 +-
 src/components/vue-ui-ridgeline.vue |  6 +++---
 src/lib.js                          | 33 +++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 7960719d..887d1f19 100644
--- a/package.json
+++ b/package.json
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index 81bc58ec..79ea9d1c 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -10,6 +10,7 @@ import {
     createStraightPath, 
     createUid, 
     dataLabel, 
+    deepEmptyObjectToNull,
     downloadCsv, 
     error, 
     getMissingDatasetAttributes, 
@@ -254,7 +255,6 @@ const formattedDataset = computed(() => {
             uid: createUid(),
             datapoints: ds.datapoints.map((dp, j) => {
                 const color = dp.color ? convertColorToHex(dp.color) : customPalette.value[j] || palette[j] || palette[j % palette.length];
-                console.log(color);
                 const id = slugify(dp.name);
                 return {
                     ...dp,
@@ -469,7 +469,7 @@ function createXyDatasetForDialog(ds) {
 
     selectedDatapoint.value = ds;
 
-    xyConfig.value = {
+    xyConfig.value = deepEmptyObjectToNull({
         ...FINAL_CONFIG.value.style.chart.dialog.xyChart,
         responsive: true, // Overriding 
         chart: {
@@ -489,7 +489,7 @@ function createXyDatasetForDialog(ds) {
                 showTimeLabel: FINAL_CONFIG.value.style.chart.xAxis.labels.values.length > 0 // Overriding
             }
         }
-    };
+    })
 
     dialog.value && dialog.value.open();
 }
diff --git a/src/lib.js b/src/lib.js
index 2e3379f6..b738c87f 100755
--- a/src/lib.js
+++ b/src/lib.js
@@ -2474,6 +2474,37 @@ export function slugify(str) {
         .replace(/-+$/, ''); // Trim end
 }
 
+export function emptyObjectToNull(obj) {
+    if (
+        obj &&
+        typeof obj === 'object' &&
+        !Array.isArray(obj) &&
+        Object.keys(obj).length === 0
+    ) {
+        return null;
+    }
+    return obj;
+}
+
+export function deepEmptyObjectToNull(value) {
+    if (Array.isArray(value)) {
+        return value.map(deepEmptyObjectToNull);
+    } else if (
+        value &&
+        typeof value === 'object' &&
+        !Array.isArray(value)
+    ) {
+        const result = {};
+        for (const key in value) {
+            if (Object.hasOwn(value, key)) {
+                result[key] = deepEmptyObjectToNull(value[key]);
+            }
+        }
+        return emptyObjectToNull(result);
+    }
+    return value;
+}
+
 
 const lib = {
     XMLNS,
@@ -2515,8 +2546,10 @@ const lib = {
     darkenHexColor,
     dataLabel,
     deepClone,
+    deepEmptyObjectToNull,
     degreesToRadians,
     downloadCsv,
+    emptyObjectToNull,
     error,
     forceValidValue,
     functionReturnsString,

From 4b1fe72732575f980b772e5cc12d7a3ed94f6c44 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 17:59:29 +0200
Subject: [PATCH 07/17] 2.9.7-beta.2

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

diff --git a/package-lock.json b/package-lock.json
index 3839c6b8..5e15ccf8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.9.7-beta.1",
+  "version": "2.9.7-beta.2",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.9.7-beta.1",
+      "version": "2.9.7-beta.2",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index 887d1f19..41a75234 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.9.7-beta.1",
+  "version": "2.9.7-beta.2",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
\ No newline at end of file
+}

From 3923ea71960cbaa80f8aacfb90ae0b717d927458 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 20:05:56 +0200
Subject: [PATCH 08/17] Fix - VueUiRidgeline - Fix container height overflow in
 responsive mode

---
 package.json                        | 2 +-
 src/components/vue-ui-ridgeline.vue | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 41a75234..88a7c316 100644
--- a/package.json
+++ b/package.json
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index 79ea9d1c..59d809b2 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -83,6 +83,7 @@ const baseWidth = ref(512);
 const selectedX = ref(null);
 const selectedDatapoint = ref(null);
 const dialog = ref(null);
+const parentHeight = ref(0);
 
 function prepareConfig() {
     const mergedConfig = useNestedProp({
@@ -184,12 +185,14 @@ function prepareChart() {
                 title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
                 legend: FINAL_CONFIG.value.style.chart.legend.show ? chartLegend.value : null,
                 source: source.value,
-                noTitle: noTitle.value
+                noTitle: noTitle.value,
+                padding: FINAL_CONFIG.value.style.chart.padding
             });
 
             requestAnimationFrame(() => {
                 baseWidth.value = width;
                 rowHeight.value = (height / props.dataset.length);
+                parentHeight.value = height
             });
         });
 
@@ -720,7 +723,7 @@ defineExpose({
         <svg ref="svgRef" :xmlns="XMLNS" v-if="isDataset"
             :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
             :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${drawableArea.fullHeight <= 0 ? 10 : drawableArea.fullHeight}`"
-            :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color};${FINAL_CONFIG.responsive ? 'height: 100%; width: 100%;' : ''}`">
+            :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color};${FINAL_CONFIG.responsive ? `height: ${parentHeight}px; width: 100%;` : ''}`">
             <defs>
                 <linearGradient 
                     v-for="(dp, i) in legendSet" 

From 7e06f982c4a6cb4791d54de8a7780590ef7cf151 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 20:06:01 +0200
Subject: [PATCH 09/17] 2.9.7-beta.3

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

diff --git a/package-lock.json b/package-lock.json
index 5e15ccf8..0b2bd566 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.9.7-beta.2",
+  "version": "2.9.7-beta.3",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.9.7-beta.2",
+      "version": "2.9.7-beta.3",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index 88a7c316..547a4634 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.9.7-beta.2",
+  "version": "2.9.7-beta.3",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
\ No newline at end of file
+}

From 88df021782bd3cc8896db1b0583fb3a42a465306 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 20:48:19 +0200
Subject: [PATCH 10/17] Improvement - VueUiRidgeline - Add optional animation

---
 package.json                        |   2 +-
 src/components/vue-ui-ridgeline.vue | 431 ++++++++++++----------------
 src/useConfig.js                    |   1 +
 types/vue-data-ui.d.ts              |   1 +
 4 files changed, 185 insertions(+), 250 deletions(-)

diff --git a/package.json b/package.json
index 547a4634..1b5dd501 100644
--- a/package.json
+++ b/package.json
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index 59d809b2..7c38c32f 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -1,24 +1,25 @@
 <script setup>
 import { ref, computed, onMounted, watch, onBeforeUnmount, nextTick } from "vue";
-import { 
+import {
     adaptColorToBackground,
-    applyDataLabel, 
-    convertColorToHex, 
-    convertCustomPalette, 
-    createCsvContent, 
-    createSmoothAreaSegments, 
-    createStraightPath, 
-    createUid, 
-    dataLabel, 
+    applyDataLabel,
+    convertColorToHex,
+    convertCustomPalette,
+    createCsvContent,
+    createSmoothAreaSegments,
+    createStraightPath,
+    createUid,
+    dataLabel,
     deepEmptyObjectToNull,
-    downloadCsv, 
-    error, 
-    getMissingDatasetAttributes, 
-    objectIsEmpty, 
-    palette, 
+    downloadCsv,
+    error,
+    getMissingDatasetAttributes,
+    getPathLengthFromCoordinates,
+    objectIsEmpty,
+    palette,
     slugify,
     themePalettes,
-    XMLNS 
+    XMLNS
 } from "../lib";
 import { useUserOptionState } from "../useUserOptionState";
 import { useChartAccessibility } from "../useChartAccessibility";
@@ -117,10 +118,10 @@ const rowHeight = ref(Math.min(
     FINAL_CONFIG.value.style.chart.areas.rowHeight,
 ));
 
-const { 
-    userOptionsVisible, 
-    setUserOptionsVisibility, 
-    keepUserOptionState 
+const {
+    userOptionsVisible,
+    setUserOptionsVisibility,
+    keepUserOptionState
 } = useUserOptionState({ config: FINAL_CONFIG.value });
 
 const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
@@ -392,6 +393,12 @@ const drawableDataset = computed(() => {
                     const zeroPath = `M ${startX},${zero} ${plots.at(-1).x},${zero}`;
 
 
+                    const pathLength = getPathLengthFromCoordinates(
+                        FINAL_CONFIG.value.style.chart.areas.smooth
+                            ? smoothPath
+                            : straightPath
+                    );
+
                     return {
                         ...dp,
                         uid: createUid(),
@@ -399,6 +406,7 @@ const drawableDataset = computed(() => {
                         smoothPath,
                         straightPath,
                         zeroPath,
+                        pathLength
                     }
                 })
                 .filter(dp => !segregated.value.includes(dp.id))
@@ -576,7 +584,7 @@ function generateCsv() {
         const labels = [
             [FINAL_CONFIG.value.table.columnNames.series, ...FINAL_CONFIG.value.style.chart.xAxis.labels.values.map(v => [v])],
             ...table.value.body.map((v, i) => {
-                return  [v[0].name, ...v.slice(1)]
+                return [v[0].name, ...v.slice(1)]
             })
         ];
         const tableXls = [
@@ -607,97 +615,60 @@ defineExpose({
 </script>
 
 <template>
-    <div 
-        ref="ridgelineChart"
-        :class="`vue-ui-ridgeline ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" 
-        :id="`vue-ui-ridgeline_${uid}`"
-        :style="{
+    <div ref="ridgelineChart" :class="`vue-ui-ridgeline ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
+        :id="`vue-ui-ridgeline_${uid}`" :style="{
             fontFamily: FINAL_CONFIG.style.fontFamily,
             width: '100%',
             textAlign: 'center',
             background: FINAL_CONFIG.style.chart.backgroundColor,
             height: FINAL_CONFIG.responsive ? '100%' : undefined
-        }"
-        @mouseenter="() => setUserOptionsVisibility(true)" 
-        @mouseleave="() => setUserOptionsVisibility(false)"
-    >
+        }" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
 
         <!-- PEN AND PAPER -->
-        <PenAndPaper
-            v-if="FINAL_CONFIG.userOptions.buttons.annotator && svgRef"
-            :color="FINAL_CONFIG.style.chart.color"
-            :backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
-            :active="isAnnotator"
-            :svgRef="svgRef"
-            @close="toggleAnnotator"
-        />
+        <PenAndPaper v-if="FINAL_CONFIG.userOptions.buttons.annotator && svgRef" :color="FINAL_CONFIG.style.chart.color"
+            :backgroundColor="FINAL_CONFIG.style.chart.backgroundColor" :active="isAnnotator" :svgRef="svgRef"
+            @close="toggleAnnotator" />
 
         <!-- NO TITLE -->
         <slot name="userConfig"></slot>
 
-        <div
-            ref="noTitle"
-            v-if="hasOptionsNoTitle" 
-            class="vue-data-ui-no-title-space" 
-            :style="`height:36px; width: 100%;background:transparent`"
-        />
+        <div ref="noTitle" v-if="hasOptionsNoTitle" class="vue-data-ui-no-title-space"
+            :style="`height:36px; width: 100%;background:transparent`" />
 
         <!-- TITLE -->
-        <div ref="chartTitle" v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;padding-bottom:24px`">
-            <Title
-                :key="`title_${titleStep}`"
-                :config="{
-                    title: {
-                        cy: 'ridgeline-div-title',
-                        ...FINAL_CONFIG.style.chart.title,
-                    },
-                    subtitle: {
-                        cy: 'ridgeline-div-subtitle',
-                        ...FINAL_CONFIG.style.chart.title.subtitle
-                    }
-                }"
-            />
+        <div ref="chartTitle" v-if="FINAL_CONFIG.style.chart.title.text"
+            :style="`width:100%;background:transparent;padding-bottom:24px`">
+            <Title :key="`title_${titleStep}`" :config="{
+                title: {
+                    cy: 'ridgeline-div-title',
+                    ...FINAL_CONFIG.style.chart.title,
+                },
+                subtitle: {
+                    cy: 'ridgeline-div-subtitle',
+                    ...FINAL_CONFIG.style.chart.title.subtitle
+                }
+            }" />
         </div>
 
         <!-- USER OPTIONS -->
-        <UserOptions
-            ref="details"
-            :key="`user_option_${step}`"
+        <UserOptions ref="details" :key="`user_option_${step}`"
             v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
-            :backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
-            :color="FINAL_CONFIG.style.chart.color"
-            :isPrinting="isPrinting"
-            :isImaging="isImaging"
-            :uid="uid"
-            :hasTooltip="false"
-            :hasPdf="FINAL_CONFIG.userOptions.buttons.pdf"
-            :hasImg="FINAL_CONFIG.userOptions.buttons.img"
-            :hasXls="FINAL_CONFIG.userOptions.buttons.csv"
-            :hasTable="FINAL_CONFIG.userOptions.buttons.table"
-            :hasLabel="false"
-            :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen"
-            :isFullscreen="isFullscreen"
-            :chartElement="ridgelineChart"
-            :position="FINAL_CONFIG.userOptions.position"
-            :isTooltip="false"
+            :backgroundColor="FINAL_CONFIG.style.chart.backgroundColor" :color="FINAL_CONFIG.style.chart.color"
+            :isPrinting="isPrinting" :isImaging="isImaging" :uid="uid" :hasTooltip="false"
+            :hasPdf="FINAL_CONFIG.userOptions.buttons.pdf" :hasImg="FINAL_CONFIG.userOptions.buttons.img"
+            :hasXls="FINAL_CONFIG.userOptions.buttons.csv" :hasTable="FINAL_CONFIG.userOptions.buttons.table"
+            :hasLabel="false" :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen" :isFullscreen="isFullscreen"
+            :chartElement="ridgelineChart" :position="FINAL_CONFIG.userOptions.position" :isTooltip="false"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
-            :hasAnnotator="FINAL_CONFIG.userOptions.buttons.annotator"
-            :isAnnotation="isAnnotator"
-            :style="{
+            :hasAnnotator="FINAL_CONFIG.userOptions.buttons.annotator" :isAnnotation="isAnnotator" :style="{
                 visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
-            }"
-            @toggleFullscreen="toggleFullscreen"
-            @generatePdf="generatePdf"
-            @generateCsv="generateCsv"
-            @generateImage="generateImage"
-            @toggleTable="toggleTable"
-            @toggleAnnotator="toggleAnnotator"
-        >
+            }" @toggleFullscreen="toggleFullscreen" @generatePdf="generatePdf" @generateCsv="generateCsv"
+            @generateImage="generateImage" @toggleTable="toggleTable" @toggleAnnotator="toggleAnnotator">
             <template #menuIcon="{ isOpen, color }" v-if="$slots.menuIcon">
-                <slot name="menuIcon" v-bind="{ isOpen, color }"/>
+                <slot name="menuIcon" v-bind="{ isOpen, color }" />
             </template>
             <template #optionTooltip v-if="$slots.optionTooltip">
-                <slot name="optionTooltip"/>
+                <slot name="optionTooltip" />
             </template>
             <template #optionPdf v-if="$slots.optionPdf">
                 <slot name="optionPdf" />
@@ -712,7 +683,7 @@ defineExpose({
                 <slot name="optionTable" />
             </template>
             <template v-if="$slots.optionFullscreen" #optionFullscreen="{ toggleFullscreen, isFullscreen }">
-                <slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }"/>
+                <slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }" />
             </template>
             <template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
                 <slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
@@ -725,10 +696,7 @@ defineExpose({
             :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${drawableArea.fullHeight <= 0 ? 10 : drawableArea.fullHeight}`"
             :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color};${FINAL_CONFIG.responsive ? `height: ${parentHeight}px; width: 100%;` : ''}`">
             <defs>
-                <linearGradient 
-                    v-for="(dp, i) in legendSet" 
-                    :id="`gradient-${dp.id}-${uid}`"
-                    x1="50%" y1="0%" x2="50%"
+                <linearGradient v-for="(dp, i) in legendSet" :id="`gradient-${dp.id}-${uid}`" x1="50%" y1="0%" x2="50%"
                     y2="100%">
                     <stop offset="0%" :stop-color="dp.color" stop-opacity="1" />
                     <stop offset="30%" :stop-color="dp.color" stop-opacity="0.7" />
@@ -737,12 +705,8 @@ defineExpose({
                 </linearGradient>
 
                 <template v-for="(ds, i) in drawableDataset">
-                    <linearGradient 
-                        v-for="(dp, j) in ds.datapoints" 
-                        :key="`grad${dp.id}`"
-                        :id="`gradient-single-${uid}-${dp.uid}`"
-                        x1="50%" y1="0%" x2="50%"
-                        y2="100%">
+                    <linearGradient v-for="(dp, j) in ds.datapoints" :key="`grad${dp.id}`"
+                        :id="`gradient-single-${uid}-${dp.uid}`" x1="50%" y1="0%" x2="50%" y2="100%">
                         <stop offset="0%" :stop-color="dp.color" stop-opacity="1" />
                         <stop offset="30%" :stop-color="dp.color" stop-opacity="0.7" />
                         <stop offset="70%" :stop-color="dp.color" stop-opacity="0.3" />
@@ -754,7 +718,7 @@ defineExpose({
 
             <g v-if="$slots.pattern">
                 <defs v-for="(variable, i) in legendSet">
-                    <slot name="pattern" v-bind="{variable, patternId: `pattern_${uid}_${i}`}"/>
+                    <slot name="pattern" v-bind="{ variable, patternId: `pattern_${uid}_${i}` }" />
                 </defs>
             </g>
 
@@ -762,81 +726,65 @@ defineExpose({
                 <!-- Paths -->
                 <g v-for="(dp, j) in ds.datapoints" :key="dp.id">
                     <!-- PATH BACKGROUND -->
-                    <path 
-                        :fill="FINAL_CONFIG.style.chart.backgroundColor" 
-                        stroke="none" 
-                        stroke-linecap="round"
-                        :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath" 
-                        :style="{ opacity: FINAL_CONFIG.style.chart.areas.opacity }" 
-                    />
+                    <path :fill="FINAL_CONFIG.style.chart.backgroundColor" stroke="none" stroke-linecap="round"
+                        :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath" :style="{
+                            opacity: FINAL_CONFIG.style.chart.areas.opacity,
+                        }" />
 
                     <!-- PATH -->
-                    <path 
+                    <path
                         :fill="FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
                         :stroke="FINAL_CONFIG.style.chart.areas.stroke.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.areas.stroke.color"
-                        :stroke-width="FINAL_CONFIG.style.chart.areas.strokeWidth" 
+                        :stroke-width="FINAL_CONFIG.style.chart.areas.strokeWidth"
                         :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath"
-                        stroke-linecap="round" 
-                        stroke-linejoin="round" 
-                    />
+                        stroke-linecap="round" stroke-linejoin="round"
+                        :class="{ 'vue-ui-ridgeline-animate': FINAL_CONFIG.useCssAnimation }" :style="{
+                            strokeDasharray: dp.pathLength,
+                            strokeDashoffset: FINAL_CONFIG.useCssAnimation ? dp.pathLength : 0,
+
+                        }" />
 
                     <!-- ZERO LINE -->
                     <path
                         :stroke="FINAL_CONFIG.style.chart.zeroLine.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.zeroLine.stroke"
                         :stroke-dasharray="FINAL_CONFIG.style.chart.zeroLine.strokeDasharray"
-                        :stroke-width="FINAL_CONFIG.style.chart.zeroLine.strokeWidth" 
-                        :d="dp.zeroPath"
-                        stroke-linecap="round" 
-                    />
+                        :stroke-width="FINAL_CONFIG.style.chart.zeroLine.strokeWidth" :d="dp.zeroPath"
+                        stroke-linecap="round" />
 
                     <!-- MAX POINT INDICATOR -->
                     <template v-if="FINAL_CONFIG.style.chart.areas.maxPoint.show && dp.plots.length > 1">
                         <template v-for="plot in dp.plots">
-                            <line 
-                                v-if="plot.isMaxPoint"
-                                :x1="plot.x"
-                                :y1="plot.y"
-                                :x2="plot.x"
-                                :y2="plot.zero"
+                            <line v-if="plot.isMaxPoint" :x1="plot.x" :y1="plot.y" :x2="plot.x" :y2="plot.zero"
                                 :stroke="FINAL_CONFIG.style.chart.areas.maxPoint.adaptStrokeToBackground ? adaptColorToBackground(dp.color) : FINAL_CONFIG.style.chart.areas.maxPoint.stroke"
                                 :stroke-width="FINAL_CONFIG.style.chart.areas.maxPoint.strokeWidth"
                                 stroke-linecap="round"
-                                :stroke-dasharray="FINAL_CONFIG.style.chart.areas.maxPoint.strokeDasharray"
-                            />
+                                :stroke-dasharray="FINAL_CONFIG.style.chart.areas.maxPoint.strokeDasharray" />
                         </template>
                     </template>
 
                     <!-- SINGLE PLOT CASE -->
                     <template v-if="dp.plots.length === 1">
-                        <circle
-                            :cx="dp.plots[0].x" 
-                            :cy="dp.plots[0].y"
+                        <circle :cx="dp.plots[0].x" :cy="dp.plots[0].y"
                             :stroke="FINAL_CONFIG.style.chart.selector.dot.stroke"
                             :stroke-width="FINAL_CONFIG.style.chart.selector.dot.strokeWidth"
-                            :r="FINAL_CONFIG.style.chart.selector.dot.radius" 
-                            :fill="FINAL_CONFIG.style.chart.selector.dot.useDatapointColor ? dp.color : FINAL_CONFIG.style.chart.selector.dot.fill" 
+                            :r="FINAL_CONFIG.style.chart.selector.dot.radius"
+                            :fill="FINAL_CONFIG.style.chart.selector.dot.useDatapointColor ? dp.color : FINAL_CONFIG.style.chart.selector.dot.fill"
                             :style="{
                                 pointerEvents: 'none'
-                            }" 
-                        />
+                            }" />
                     </template>
                 </g>
 
                 <!-- Y AXIS LABELS -->
-                <text 
-                    :x="ds.label.x" 
-                    :y="ds.label.y" text-anchor="end"
+                <text :x="ds.label.x" :y="ds.label.y" text-anchor="end"
                     :font-size="FINAL_CONFIG.style.chart.yAxis.labels.fontSize"
-                    :font-weight="FINAL_CONFIG.style.chart.yAxis.labels.bold ? 'bold' : 'normal'" 
-                    :fill="FINAL_CONFIG.style.chart.yAxis.labels.color" 
-                    :style="{
-                        cursor: FINAL_CONFIG.style.chart.dialog.show ? 'pointer': 'default'
+                    :font-weight="FINAL_CONFIG.style.chart.yAxis.labels.bold ? 'bold' : 'normal'"
+                    :fill="FINAL_CONFIG.style.chart.yAxis.labels.color" :style="{
+                        cursor: FINAL_CONFIG.style.chart.dialog.show ? 'pointer' : 'default'
                     }"
                     :text-decoration="FINAL_CONFIG.style.chart.dialog.show && (selectedYAxisLabelIndex === i || (!!selectedDatapoint && ds.uid === selectedDatapoint.uid)) ? 'underline' : ''"
-                    @mouseenter="setYAxisLabelHoverIndex(i)"
-                    @mouseleave="resetYAxisLabelIndex"
-                    @click="createXyDatasetForDialog(ds)"
-                >
+                    @mouseenter="setYAxisLabelHoverIndex(i)" @mouseleave="resetYAxisLabelIndex"
+                    @click="createXyDatasetForDialog(ds)">
                     {{ ds.name }}
                 </text>
             </g>
@@ -845,23 +793,23 @@ defineExpose({
             <g v-if="FINAL_CONFIG.style.chart.xAxis.labels.values.length">
                 <template v-for="(xLabel, i) in xAxisTrapsAndLabels">
                     <slot name="time-label" v-bind="{
-                        show: (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),
+                        show: (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),
                         fontSize: FINAL_CONFIG.style.chart.xAxis.labels.fontSize,
                         content: xLabel.label,
                         textAnchor: FINAL_CONFIG.style.chart.xAxis.labels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.xAxis.labels.rotation < 0 ? 'end' : 'middle',
                         fill: FINAL_CONFIG.style.chart.xAxis.labels.color,
-                        transform:`translate(${xLabel.selectorX}, ${drawableArea.top + xLabel.height + FINAL_CONFIG.style.chart.xAxis.labels.offsetY}), rotate(${FINAL_CONFIG.style.chart.xAxis.labels.rotation})`,
+                        transform: `translate(${xLabel.selectorX}, ${drawableArea.top + xLabel.height + FINAL_CONFIG.style.chart.xAxis.labels.offsetY}), rotate(${FINAL_CONFIG.style.chart.xAxis.labels.rotation})`,
                         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) || 
-                            (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)"
+                        <text
+                            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)"
                             :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'"
@@ -869,8 +817,7 @@ defineExpose({
                             :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
-                            }"
-                        >
+                            }">
                             {{ xLabel.label }}
                         </text>
                     </slot>
@@ -880,31 +827,18 @@ defineExpose({
             <!-- TOOLTIP TRAPS, SELECTOR AND DATALABELS-->
             <g>
                 <!-- TOOLTIP TRAPS -->
-                <rect 
-                    v-for="(trap, i) in xAxisTrapsAndLabels" 
-                    :x="trap.x" 
-                    :y="trap.y" 
-                    :width="trap.width < 0 ? 0.1 : trap.width"
-                    :height="trap.height < 0 ? 0.1 : trap.height" 
-                    fill="transparent" 
-                    @mouseenter="selectedX = trap"
-                    @mouseleave="selectedX = null"
-                    @click="() => selectX(trap)"
-                />
+                <rect v-for="(trap, i) in xAxisTrapsAndLabels" :x="trap.x" :y="trap.y"
+                    :width="trap.width < 0 ? 0.1 : trap.width" :height="trap.height < 0 ? 0.1 : trap.height"
+                    fill="transparent" @mouseenter="selectedX = trap" @mouseleave="selectedX = null"
+                    @click="() => selectX(trap)" />
 
                 <!-- SELECTOR -->
-                <line 
-                    v-if="FINAL_CONFIG.style.chart.selector.show && !!selectedX" 
-                    :x1="selectedX.selectorX"
-                    :x2="selectedX.selectorX" 
-                    :y1="selectedX.y" 
-                    :y2="selectedX.y + selectedX.height - rowHeight / 2"
+                <line v-if="FINAL_CONFIG.style.chart.selector.show && !!selectedX" :x1="selectedX.selectorX"
+                    :x2="selectedX.selectorX" :y1="selectedX.y" :y2="selectedX.y + selectedX.height - rowHeight / 2"
                     :stroke="FINAL_CONFIG.style.chart.selector.stroke"
                     :stroke-width="FINAL_CONFIG.style.chart.selector.strokeWidth"
-                    :stroke-dasharray="FINAL_CONFIG.style.chart.selector.strokeDasharray" 
-                    stroke-linecap="round"
-                    :style="{ pointerEvents: 'none' }" 
-                />
+                    :stroke-dasharray="FINAL_CONFIG.style.chart.selector.strokeDasharray" stroke-linecap="round"
+                    :style="{ pointerEvents: 'none' }" />
 
                 <!-- SELECTED X -->
                 <template v-if="!!selectedX">
@@ -912,18 +846,14 @@ defineExpose({
                         <template v-for="dp in ds.datapoints">
                             <template v-for="(plot, k) in dp.plots">
                                 <!-- DOT -->
-                                <circle 
-                                    v-if="!!selectedX && selectedX.index === k" 
-                                    :cx="plot.x" 
-                                    :cy="plot.y"
+                                <circle v-if="!!selectedX && selectedX.index === k" :cx="plot.x" :cy="plot.y"
                                     :stroke="FINAL_CONFIG.style.chart.selector.dot.stroke"
                                     :stroke-width="FINAL_CONFIG.style.chart.selector.dot.strokeWidth"
-                                    :r="FINAL_CONFIG.style.chart.selector.dot.radius" 
-                                    :fill="FINAL_CONFIG.style.chart.selector.dot.useDatapointColor ? dp.color : FINAL_CONFIG.style.chart.selector.dot.fill" 
+                                    :r="FINAL_CONFIG.style.chart.selector.dot.radius"
+                                    :fill="FINAL_CONFIG.style.chart.selector.dot.useDatapointColor ? dp.color : FINAL_CONFIG.style.chart.selector.dot.fill"
                                     :style="{
                                         pointerEvents: 'none'
-                                    }" 
-                                />
+                                    }" />
                                 <!-- DATA LABELS -->
                                 <text v-if="selectedX && selectedX.index === k"
                                     :x="isTextOverflowingRight(
@@ -968,50 +898,34 @@ defineExpose({
                     </template>
                 </template>
             </g>
-            <slot name="svg" :svg="svg"/>
+            <slot name="svg" :svg="svg" />
         </svg>
 
         <div v-if="$slots.watermark" class="vue-data-ui-watermark">
-            <slot name="watermark" v-bind="{ isPrinting: isPrinting || isImaging }"/>
+            <slot name="watermark" v-bind="{ isPrinting: isPrinting || isImaging }" />
         </div>
 
-        <Skeleton
-            v-if="!isDataset"
-            :config="{
-                type: 'ridgeline',
-                style: {
-                    backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
-                    ridgeline: {
-                        color: '#CCCCCC'
-                    }
+        <Skeleton v-if="!isDataset" :config="{
+            type: 'ridgeline',
+            style: {
+                backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
+                ridgeline: {
+                    color: '#CCCCCC'
                 }
-            }"
-        />
+            }
+        }" />
 
         <div ref="chartLegend">
-            <Legend
-                v-if="FINAL_CONFIG.style.chart.legend.show"
-                :key="`legend_${legendStep}`"
-                :legendSet="legendSet"
-                :config="legendConfig"
-                @clickMarker="({ legend }) => segregate(legend.id)"
-            >
+            <Legend v-if="FINAL_CONFIG.style.chart.legend.show" :key="`legend_${legendStep}`" :legendSet="legendSet"
+                :config="legendConfig" @clickMarker="({ legend }) => segregate(legend.id)">
                 <template #legend-pattern="{ legend, index }" v-if="$slots.pattern">
-                    <Shape
-                        :shape="legend.shape"
-                        :radius="30"
-                        stroke="none"
-                        :plot="{ x: 30, y: 30}"
-                        :fill="`url(#pattern_${uid}_${index})`"
-                    />
+                    <Shape :shape="legend.shape" :radius="30" stroke="none" :plot="{ x: 30, y: 30 }"
+                        :fill="`url(#pattern_${uid}_${index})`" />
                 </template>
 
                 <template #item="{ legend }">
-                    <div 
-                        data-cy="legend-item"
-                        :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`"
-                        @click="legend.segregate()" 
-                    >
+                    <div data-cy="legend-item" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`"
+                        @click="legend.segregate()">
                         {{ legend.name }}
                     </div>
                 </template>
@@ -1024,34 +938,25 @@ defineExpose({
         </div>
 
         <!-- DATA TABLE -->
-        <Accordion
-            hideDetails
-            v-if="isDataset"
-            :config="{
-                open: mutableConfig.showTable,
-                maxHeight: 10000,
-                body: {
-                    backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
-                    color: FINAL_CONFIG.style.chart.color
-                },
-                head: {
-                    backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
-                    color: FINAL_CONFIG.style.chart.color
-                }
-            }"
-        >
+        <Accordion hideDetails v-if="isDataset" :config="{
+            open: mutableConfig.showTable,
+            maxHeight: 10000,
+            body: {
+                backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
+                color: FINAL_CONFIG.style.chart.color
+            },
+            head: {
+                backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
+                color: FINAL_CONFIG.style.chart.color
+            }
+        }">
             <template #content>
-                <DataTable
-                    :key="`table_${tableStep}`"
-                    :colNames="dataTable.colNames"
-                    :head="dataTable.head"
-                    :body="dataTable.body"
-                    :config="dataTable.config"
-                    :title="`${FINAL_CONFIG.style.chart.title.text}${FINAL_CONFIG.style.chart.title.subtitle.text ? ` :${FINAL_CONFIG.style.chart.title.subtitle.text}`: ``}`"
-                    @close="mutableConfig.showTable = false"
-                >
+                <DataTable :key="`table_${tableStep}`" :colNames="dataTable.colNames" :head="dataTable.head"
+                    :body="dataTable.body" :config="dataTable.config"
+                    :title="`${FINAL_CONFIG.style.chart.title.text}${FINAL_CONFIG.style.chart.title.subtitle.text ? ` :${FINAL_CONFIG.style.chart.title.subtitle.text}` : ``}`"
+                    @close="mutableConfig.showTable = false">
                     <template #th="{ th }">
-                        <div v-html="th"/>
+                        <div v-html="th" />
                     </template>
                     <template #td="{ td }">
                         {{ td.name ? td.name : applyDataLabel(
@@ -1061,7 +966,7 @@ defineExpose({
                                 p: FINAL_CONFIG.style.chart.xAxis.labels.prefix,
                                 v: td,
                                 s: FINAL_CONFIG.style.chart.xAxis.labels.suffix,
-                                r: FINAL_CONFIG.table.td.roundingValue                                
+                                r: FINAL_CONFIG.table.td.roundingValue
                             })
                         ) }}
                     </template>
@@ -1069,15 +974,11 @@ defineExpose({
             </template>
         </Accordion>
 
-        <BaseDraggableDialog
-            v-if="FINAL_CONFIG.style.chart.dialog.show"
-            ref="dialog" 
-            @close="selectedDatapoint = null"
+        <BaseDraggableDialog v-if="FINAL_CONFIG.style.chart.dialog.show" ref="dialog" @close="selectedDatapoint = null"
             :backgroundColor="FINAL_CONFIG.style.chart.dialog.backgroundColor"
             :color="FINAL_CONFIG.style.chart.dialog.color"
             :headerBg="FINAL_CONFIG.style.chart.dialog.header.backgroundColor"
-            :headerColor="FINAL_CONFIG.style.chart.dialog.header.color"
-        >
+            :headerColor="FINAL_CONFIG.style.chart.dialog.header.color">
             <template #title>
                 {{ selectedDatapoint.name }}
             </template>
@@ -1098,4 +999,36 @@ defineExpose({
     user-select: none;
     position: relative;
 }
+
+@keyframes vueDataUiLineAnimation {
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+.vue-data-ui-line-animated {
+    animation: vueDataUiLineAnimation 1.5s ease-out forwards;
+}
+
+.vue-ui-ridgeline-animate {
+    transform-origin: center;
+    animation: lineAnimation 0.5s ease-in-out, vueDataUiLineAnimation 0.5s ease-out forwards;
+}
+
+@keyframes lineAnimation {
+    0% {
+        transform: scale(0.9, 0.9);
+        opacity: 0;
+    }
+
+    80% {
+        transform: scale(1.02, 1.02);
+        opacity: 1;
+    }
+
+    to {
+        transform: scale(1, 1);
+        opacity: 1;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/useConfig.js b/src/useConfig.js
index 5d8a165c..0ea26747 100755
--- a/src/useConfig.js
+++ b/src/useConfig.js
@@ -5350,6 +5350,7 @@ export function useConfig() {
         theme: '',
         customPalette: [],
         responsive: false,
+        useCssAnimation: true,
         userOptions: USER_OPTIONS({
             tooltip: false,
             pdf: true,
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index cd77f7dd..4e2a88e5 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -6806,6 +6806,7 @@ declare module "vue-data-ui" {
         customPalette?: string[];
         responsive?: boolean;
         userOptions?: ChartUserOptions;
+        useCssAnimation?: boolean;
         table?: {
             show?: boolean;
             responsiveBreakpoint?: number;

From d5f7e61748069862ead068c5f2c512acd60d386b Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 20:48:30 +0200
Subject: [PATCH 11/17] 2.9.7-beta.4

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

diff --git a/package-lock.json b/package-lock.json
index 0b2bd566..6a0ee9cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.9.7-beta.3",
+  "version": "2.9.7-beta.4",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.9.7-beta.3",
+      "version": "2.9.7-beta.4",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index 1b5dd501..86a2264b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.9.7-beta.3",
+  "version": "2.9.7-beta.4",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
\ No newline at end of file
+}

From 408f5369f7b28be0d6240a1f64f5c0980efc5957 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 22:57:07 +0200
Subject: [PATCH 12/17] Improvement - VueUiRidgeline - Add config option to
 disable gradients; improve pattern slots

---
 TestingArena/ArenaVueUiRidgeline.vue | 12 +++++++++++-
 package.json                         |  2 +-
 src/components/vue-ui-ridgeline.vue  | 16 +++++++---------
 src/useConfig.js                     |  1 +
 types/vue-data-ui.d.ts               |  1 +
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/TestingArena/ArenaVueUiRidgeline.vue b/TestingArena/ArenaVueUiRidgeline.vue
index a4c3878e..dfd56c4f 100644
--- a/TestingArena/ArenaVueUiRidgeline.vue
+++ b/TestingArena/ArenaVueUiRidgeline.vue
@@ -101,6 +101,7 @@ const model = ref([
     { key: 'style.chart.areas.smooth', def: true, type: 'checkbox'},
     { key: 'style.chart.areas.opacity', def: 0.9, min: 0.1, max: 1, step: 0.01, type: 'number'},
     { key: 'style.chart.areas.useCommonColor', def: false, type: 'checkbox'},
+    { key: 'style.chart.areas.useGradient', def: true, type: 'checkbox'},
     
     { key: 'style.chart.areas.maxPoint.show', def: true, type: 'checkbox'},
     { key: 'style.chart.areas.maxPoint.adaptStrokeToBackground', def: true, type: 'checkbox'},
@@ -189,7 +190,16 @@ const config = computed(() => {
         <template #title>VueUiRidgeline</template>
 
         <template #local>
-            <LocalVueUiRidgeLine :dataset="dataset" :config="config"/>
+            <LocalVueUiRidgeLine :dataset="dataset" :config="config">
+                <!-- <template #pattern="{ seriesIndex, patternId }">
+                    <pattern v-if="seriesIndex === 0" :id="patternId" width="70" height="8" patternTransform="scale(2)"
+                    patternUnits="userSpaceOnUse" opacity="0.5">
+                    <rect width="100%" height="100%" fill="#FFFFFF20" />
+                    <path fill="none" stroke="#ecc94b"
+                        d="M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2s14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6S49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14S20.785-8.742 16.3-3.661C11.918 1.306 8.353 6-.02 6.002" />
+                </pattern>
+                </template> -->
+            </LocalVueUiRidgeLine>
         </template>
 
         <template #VDUI-local>
diff --git a/package.json b/package.json
index 86a2264b..7143da6c 100644
--- a/package.json
+++ b/package.json
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index 7c38c32f..25a21896 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -715,25 +715,23 @@ defineExpose({
                 </template>
             </defs>
 
-
-            <g v-if="$slots.pattern">
-                <defs v-for="(variable, i) in legendSet">
-                    <slot name="pattern" v-bind="{ variable, patternId: `pattern_${uid}_${i}` }" />
-                </defs>
-            </g>
-
             <g v-for="(ds, i) in drawableDataset" :key="`ds-${i}`">
                 <!-- Paths -->
                 <g v-for="(dp, j) in ds.datapoints" :key="dp.id">
+                    <g v-if="$slots.pattern">
+                        <defs>
+                            <slot name="pattern" v-bind="{ datapointIndex: i, seriesIndex: j, patternId: `pattern_${uid}_${dp.uid}` }" />
+                        </defs>
+                    </g>
                     <!-- PATH BACKGROUND -->
-                    <path :fill="FINAL_CONFIG.style.chart.backgroundColor" stroke="none" stroke-linecap="round"
+                    <path :fill="$slots.pattern ? `url(#pattern_${uid}_${dp.uid})` : FINAL_CONFIG.style.chart.backgroundColor" stroke="none" stroke-linecap="round"
                         :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath" :style="{
                             opacity: FINAL_CONFIG.style.chart.areas.opacity,
                         }" />
 
                     <!-- PATH -->
                     <path
-                        :fill="FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
+                        :fill="!FINAL_CONFIG.style.chart.areas.useGradient ? dp.color : FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
                         :stroke="FINAL_CONFIG.style.chart.areas.stroke.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.areas.stroke.color"
                         :stroke-width="FINAL_CONFIG.style.chart.areas.strokeWidth"
                         :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath"
diff --git a/src/useConfig.js b/src/useConfig.js
index 0ea26747..888bcd16 100755
--- a/src/useConfig.js
+++ b/src/useConfig.js
@@ -5439,6 +5439,7 @@ export function useConfig() {
                     smooth: true, // Also applied in dialog chart
                     opacity: 0.9,
                     useCommonColor: false,
+                    useGradient: true,
                     maxPoint: {
                         show: true,
                         adaptStrokeToBackground: true,
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index 4e2a88e5..75b5fcbc 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -6843,6 +6843,7 @@ declare module "vue-data-ui" {
                     rowHeight?: number;
                     strokeWidth?: number;
                     useCommonColor?: boolean;
+                    useGradient?: boolean;
                     stroke?: {
                         useSerieColor?: boolean;
                         color?: string;

From b16042d5a13c14de35abd60eb464c47f8448f3b1 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 22:57:22 +0200
Subject: [PATCH 13/17] 2.9.7-beta.5

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

diff --git a/package-lock.json b/package-lock.json
index 6a0ee9cc..8a2b0a7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.9.7-beta.4",
+  "version": "2.9.7-beta.5",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.9.7-beta.4",
+      "version": "2.9.7-beta.5",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index 7143da6c..9f7613ad 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.9.7-beta.4",
+  "version": "2.9.7-beta.5",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
\ No newline at end of file
+}

From 777202c1017f28b1fd9f8a7d921d098e3243d52a Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 23:38:12 +0200
Subject: [PATCH 14/17] Improvement - VueUiRidgeline - Hide side strokes on
 areas

---
 package.json                        |  2 +-
 src/components/vue-ui-ridgeline.vue | 28 ++++++++++++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 9f7613ad..b6939ec8 100644
--- a/package.json
+++ b/package.json
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index 25a21896..34a2ad70 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -7,6 +7,7 @@ import {
     convertCustomPalette,
     createCsvContent,
     createSmoothAreaSegments,
+    createSmoothPath,
     createStraightPath,
     createUid,
     dataLabel,
@@ -391,12 +392,14 @@ const drawableDataset = computed(() => {
                     const smoothPath = `${createSmoothAreaSegments(plots, zero, false, false)}`;
                     const straightPath = `M ${startX},${zero} ${createStraightPath(plots)} ${plots.at(-1).x},${zero}`;
                     const zeroPath = `M ${startX},${zero} ${plots.at(-1).x},${zero}`;
+                    const smoothPathRidge = `M ${createSmoothPath(plots)}`;
+                    const straightPathRidge = `M ${createStraightPath(plots)}`;
 
 
                     const pathLength = getPathLengthFromCoordinates(
                         FINAL_CONFIG.value.style.chart.areas.smooth
-                            ? smoothPath
-                            : straightPath
+                            ? smoothPathRidge
+                            : straightPathRidge
                     );
 
                     return {
@@ -406,7 +409,9 @@ const drawableDataset = computed(() => {
                         smoothPath,
                         straightPath,
                         zeroPath,
-                        pathLength
+                        pathLength,
+                        smoothPathRidge,
+                        straightPathRidge
                     }
                 })
                 .filter(dp => !segregated.value.includes(dp.id))
@@ -731,15 +736,26 @@ defineExpose({
 
                     <!-- PATH -->
                     <path
-                        :fill="!FINAL_CONFIG.style.chart.areas.useGradient ? dp.color : FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
+                        fill="none"
                         :stroke="FINAL_CONFIG.style.chart.areas.stroke.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.areas.stroke.color"
                         :stroke-width="FINAL_CONFIG.style.chart.areas.strokeWidth"
+                        :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPathRidge : dp.straightPathRidge"
+                        stroke-linecap="round" stroke-linejoin="round"
+                        :class="{ 'vue-ui-ridgeline-animate': FINAL_CONFIG.useCssAnimation }" 
+                        :style="{
+                            strokeDasharray: dp.pathLength,
+                            strokeDashoffset: FINAL_CONFIG.useCssAnimation ? dp.pathLength : 0,
+                        }" 
+                    />
+                    <path
+                        :fill="!FINAL_CONFIG.style.chart.areas.useGradient ? dp.color : FINAL_CONFIG.style.chart.areas.useCommonColor ? `url(#gradient-${dp.id}-${uid})` : `url(#gradient-single-${uid}-${dp.uid})`"
+                        stroke="none"
                         :d="FINAL_CONFIG.style.chart.areas.smooth ? dp.smoothPath : dp.straightPath"
                         stroke-linecap="round" stroke-linejoin="round"
-                        :class="{ 'vue-ui-ridgeline-animate': FINAL_CONFIG.useCssAnimation }" :style="{
+                        :class="{ 'vue-ui-ridgeline-animate': FINAL_CONFIG.useCssAnimation }" 
+                        :style="{
                             strokeDasharray: dp.pathLength,
                             strokeDashoffset: FINAL_CONFIG.useCssAnimation ? dp.pathLength : 0,
-
                         }" />
 
                     <!-- ZERO LINE -->

From e7cad9a4423f4f2b76a1d8c1a4e2253b56a8ffc3 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sat, 7 Jun 2025 23:38:23 +0200
Subject: [PATCH 15/17] 2.9.7-beta.6

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

diff --git a/package-lock.json b/package-lock.json
index 8a2b0a7f..06df4d16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.9.7-beta.5",
+  "version": "2.9.7-beta.6",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.9.7-beta.5",
+      "version": "2.9.7-beta.6",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index b6939ec8..5674b21d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.9.7-beta.5",
+  "version": "2.9.7-beta.6",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
\ No newline at end of file
+}

From 6728ff5e5d23db10269e5743476672bb7bf9bc80 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 8 Jun 2025 08:09:42 +0200
Subject: [PATCH 16/17] Fix - VueUiRidgeline - Add missing condition to display
 zeroLine

---
 src/components/vue-ui-ridgeline.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/vue-ui-ridgeline.vue b/src/components/vue-ui-ridgeline.vue
index 34a2ad70..320dea9b 100644
--- a/src/components/vue-ui-ridgeline.vue
+++ b/src/components/vue-ui-ridgeline.vue
@@ -760,10 +760,13 @@ defineExpose({
 
                     <!-- ZERO LINE -->
                     <path
+                        v-if="FINAL_CONFIG.style.chart.zeroLine.show"
                         :stroke="FINAL_CONFIG.style.chart.zeroLine.useSerieColor ? dp.color : FINAL_CONFIG.style.chart.zeroLine.stroke"
                         :stroke-dasharray="FINAL_CONFIG.style.chart.zeroLine.strokeDasharray"
-                        :stroke-width="FINAL_CONFIG.style.chart.zeroLine.strokeWidth" :d="dp.zeroPath"
-                        stroke-linecap="round" />
+                        :stroke-width="FINAL_CONFIG.style.chart.zeroLine.strokeWidth" 
+                        :d="dp.zeroPath"
+                        stroke-linecap="round" 
+                    />
 
                     <!-- MAX POINT INDICATOR -->
                     <template v-if="FINAL_CONFIG.style.chart.areas.maxPoint.show && dp.plots.length > 1">

From e6425f55f9768863e48c52d936f9dbf4fdcb3ac2 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 8 Jun 2025 08:09:53 +0200
Subject: [PATCH 17/17] 2.9.7-beta.7

---
 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 06df4d16..3cc83603 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.9.7-beta.6",
+  "version": "2.9.7-beta.7",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.9.7-beta.6",
+      "version": "2.9.7-beta.7",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index 5674b21d..76d29184 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.9.7-beta.6",
+  "version": "2.9.7-beta.7",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [