Releases · graphieros/vue-data-ui

A ridgeline chart (also known as a joyplot) is a series of line plots that are combined by vertical stacking to allow the easy visualization of changes through space or time. The plots are often overlapped slightly to allow the changes to be more clearly contrasted.

Ridgeline charts are perfect for comparing distributions across categories or time—especially when you want to show patterns, overlaps, or trends among many groups at once

Usage examples

Visualize distributions over time of daily temperatures
Analyze word frequencies across chapters in different books
Compare the distribution of daily returns for various stock market sectors

Clicking on the label of a datapoint singles it out inside a resizable and draggable dialog.

🔗 View the docs

🔗 View examples

A chart maker is also available to quickly copy paste a turnkey boilerplate.

Enregistrement.de.l.ecran.2025-06-08.a.09.02.30.mov

Assets 2

01 Jun 09:06

graphieros

v2.9.6

9f13dde

v2.9.6

VueUiWorld

Fix issue with legend colors

Assets 2

31 May 17:48

graphieros

v2.9.5

0eaf5a3

v2.9.5

VueUiTable

Use VueUiXy and VueUiDonut as chart components instead of old built-in charts

Config changes:

const vue_ui_table = ref({
    //...
    style: {
        chart: {
            layout: {
                line: {
                    smooth: true, // new
                    useArea: false, // new
                    selector: {
                        stroke: '#ccc', // Deprecated
                        strokeWidth: 1, // Deprecated
                        strokeDasharray: 5 // Deprecated
                    }
                },
            }
        }
    },
})

Assets 2

30 May 18:23

graphieros

v2.9.2

b40e1cc

v2.9.2

VueUiTable #203

Fix dataset reactivity issue

Assets 2

30 May 04:08

graphieros

v2.9.1

ce7c7e9

v2.9.1

VueUiWorld #202

To accommodate different perspectives and use cases, the VueUiWorld component now includes a configuration option:

config.style.chart.territory.showTaiwanAsPartOfChina

const config = ref({
  style: {
    chart: {
      territory: {
        showTaiwanAsPartOfChina: true
      }
    }
  }
})

When set to true, Taiwan is displayed as part of China on the map.
When set to false (the default), Taiwan is shown as a separate entity.

This approach is intended to offer flexibility for developers and organizations with varying requirements. We do not take a position on political matters and aim to provide a configurable solution for all users.

Assets 2

29 May 17:23

graphieros

v2.9.0

d5b4cb2

v2.9.0

Move jspdf to peer dependencies #201

From this version onwards, jspdf will have to be installed to use the pdf generation.

If you don't want to use pdf generation, but wish to use the chart menu options, you can remove the pdf button from the config:

const config = ref({
  userOptions: {
    show: true,
    buttons: {
      pdf: false, // hide the pdf button
    }
  }
})

Assets 2

29 May 14:47

graphieros

v2.8.1

33872bb

v2.8.1

VueUiDashboard #197

Add support for passing custom components in the dataset prop

const dynamicString = ref('Dynamic string content');

const comps = computed(() => [
  {
    id: 1,
    width: 20,
    height: 50,
    left: 44,
    top: 4,
    component: "VueUiGauge", // Vue Data UI component, passed here as string
    props: { config: { userOptions: { show: false } }, dataset: gaugeDataset },
  },
  {
    id: 2,
    width: 20,
    height: 60,
    left: 44,
    top: 50,
    component: markRaw(MyCustomComponent), // Your custom component
    props: { str: dynamicString.value },
  },
]);