VueUiSparkStackbar add legend margin

Author: graphieros

package-lock.json

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

package.json

@@ -114,7 +114,7 @@ const drawableDataset = computed(() => {
                 />
             </g>
         </svg>
-        <div v-if="stackConfig.style.legend.show" :style="`background:${stackConfig.style.backgroundColor};display:flex;flex-wrap:wrap;column-gap:12px;width:calc(100% - 12px);margin:0 auto; padding: 0 6px;justify-content:${stackConfig.style.legend.textAlign === 'left' ? 'flex-start' : stackConfig.style.legend.textAlign === 'right' ? 'flex-end' : 'center'}`">
+        <div v-if="stackConfig.style.legend.show" :style="`background:${stackConfig.style.backgroundColor};display:flex;flex-wrap:wrap;column-gap:12px;width:calc(100% - 12px);margin:0 auto;margin:${stackConfig.style.legend.margin}; padding: 0 6px;justify-content:${stackConfig.style.legend.textAlign === 'left' ? 'flex-start' : stackConfig.style.legend.textAlign === 'right' ? 'flex-end' : 'center'}`">
             <div v-for=" (rect, i) in drawableDataset" :style="`font-size:${stackConfig.style.legend.fontSize}px`">
                 <div style="display:flex;flex-direction:row;align-items:center;gap:4px;justify-content:center">
                     <svg :height="`${stackConfig.style.legend.fontSize}px`" :width="`${stackConfig.style.legend.fontSize}px`" viewBox="0 0 10 10">

src/components/vue-ui-sparkstackbar.vue

@@ -2277,6 +2277,7 @@
                 "textAlign": "left",
                 "show": true,
                 "fontSize": 12,
+                "margin": "6px 0 0 0",
                 "name": {
                     "color": "#2D353C",
                     "bold": false

src/default_configs.json

@@ -19,6 +19,7 @@ declare module 'vue-data-ui' {
             legend?: {
                 textAlign?: "left" | "right" | "center";
                 show?: boolean;
+                margin?: string;
                 fontSize?: number;
                 name?: {
                     color?: string;