v3.9.12

VueUiGeo

• Move the #svg scoped slot into the main G element, so that its transform attributes gets applied to custom svg elements, allowing this kind of customization

v3.9.11

VueUiDag

• Place #free-node-label on the last svg layer

VueUiHeatmap

• Improve labels observer to apply redimensioning when labels are rotated
• Add optional crosshairs:

const config = ref({
  style: {
    layout: {
      crosshairs: {
        show: false,
        stroke: "#2D353C",
        strokeWidth: 1,
        strokeDasharray: 0,
      },
    },
  },
});

Enregistrement.de.l.ecran.2025-12-21.a.11.44.01.mov

[Docs are up to date](https://vue-data-ui.graphieros.com/docs#vue-ui-heatmap)

v3.9.9

VueUiGeo

• Accept broader geoJson formats

Docs are up to date

v3.9.7

VueUiIcon

• Add new icons:

Docs are up to date

v3.9.6

VueUiBullet

• Fix cropped legend in responsive mode (top and bottom padding were not taken into account)

VueUiDonut

• Make data label markers for small arcs more elegant when curvedMarkers is true

Docs website is up to date

v3.9.5

VueUiDag

1. Add optional animated edges:

Enregistrement.de.l.ecran.2025-12-16.a.10.46.16.mov

Animations styles can be set globally in the config:

const config = ref({
  style: {
    chart: {
      edges: {
        animations: {
          dasharray: '2 6', // new
          animationDurationMs: 1000 // new
        }
      }
    }
  }
})

Animations are enabled in the dataset, and specific styles can be set for each edge:

const dataset = ref({
    nodes: [
        { id: "A", label: "A",},
        { id: "B", label: "B",},
        { id: "C", label: "C",},
        { id: "D", label: "D" },
    ],
    edges: [
        { 
            from: "A", 
            to: "B", 
            color: '#FF0000',
            animated: true, // new
            dasharray: '2 6', // new
            animationDurationMs: 1000, // new
            animationDirection: -1 // new; force direction (if not provided, defaults to an animation towards the arrow)
        },
        { from: "B", to: "A" },
        { from: "B", to: "A" },
        { from: "C", to: "A" },
        { from: "B", to: "D" },
        { from: "C", to: "D" },
        { from: "D", to: "A", animated: true },
    ]
});

2. Add optional background pattern

const config = ref({
  style: {
    chart: {
      backgroundPattern: {
        show: false, // new
        spacingRatio: 3, // new
        dotRadiusRatio: 5, // new
        dotColor: '#E1E1E8', // new
        opacity: 1, // new
      }
    }
  }
})

By default, the pattern is made of circles.
A custom pattern can be injected through the #background-pattern slot, using svg elements.
The following override will display crosses instead of circles:

<VueUiDag :dataset="dataset" :config="config">
    <template #background-pattern="{ x, y, color }">
        <line :x1="x - 2" :x2="x + 2" :y1="y" :y2="y" :stroke="color" stroke-width="0.5"/>
        <line :x1="x" :x2="x" :y1="y - 2" :y2="y + 2" :stroke="color" stroke-width="0.5"/>
    </template> 
</VueUiDag>

Docs are up to date
Examples are up to date

v3.9.4

VueUiBullet

• Fix config height & width not reactive
• Fix cropped legend in responsive mode

Docs are up to date

v3.9.3

VueUiDonut

• Improve small labels layout (narrower marker path, better font size management).

Docs are up to date

v3.9.2

VueUiWordCloud

• Add optional zoom controls:

const config = ref({
    style: {
        chart: {
            controls: {
                position: 'bottom',
                show: true,
                backgroundColor: '#F3F4F6',
                buttonColor: '#F3F4F6',
                color: '#1A1A1A',
                fontSize: 14,
                border: '1px solid #CCCCCC',
                padding: '0.5rem',
                borderRadius: '0.25rem'
            }
        }
    }
});

Docs are up to date

v3.9.1

VueUiGeo new component! 🎉

• Render any GeoJSON map and plot custom data points with full interaction and zoom control.
• Datapoints are highly customizable through slots

Enregistrement.de.l.ecran.2025-12-14.a.14.14.06.mov

Docs are up to date