v2.17.11

datetime formatter

• Fix display issues when passing timestamps with hour intervals

v3.0.0-next.3

v3.0.0-next.2 pre-release

This prerelease is the first step toward our 3.x line, focused exclusively on improving layouts and responsive features across every component.

⚠️ Note: This is a prerelease. APIs may shift between 3.0.0‑next.2 and the final 3.0.0. We strongly encourage you to try it out, share feedback, and report any issue you encounter. It is not recommended to use it in production.

npm i vue-data-ui@next

---

V3 pre-release status details

v2.17.9

VueUiDonut & VueUiNestedDonuts

• Fix incomplete arc when values are way under 0 (ej. 0.00001) - (This affected all components containing donuts)
• Add config attribute to control the transparent color applied on arcs on hover:

const config = ref({
  style: {
    chart: {
      layout: {
        donut: {
          selectedColor: "#0000001A", // new
          borderColorAuto: true, // new (if true, defaults to the same color as the chart's backgroundColor)
          borderColor: "#CCCCCC" // used if borderColorAuto is false
        }
      }
    }
  }
})

v2.17.6

VueUiDonut & VueUiVerticalBar

• Add config events

const config = ref({
  events: {
            // default
            datapointEnter: null,
            datapointLeave: null,
            datapointClick: null
        },
});

Usage:

const config = ref({
  events: {
            // default
            datapointEnter: ({ datapoint, seriesIndex }) => {
               console.log({ datapoint, seriesIndex })
             },
            // other events expose the same data
        },
});

This feature will be gradually rolled out on other components where it makes sense.

v2.17.5

VueUiCandlestick

• Fix PNG & PDF generation not working

VueUiStackbar

• Fix unreactive title config

PNG & PDF in Safari

• Fix charts not showing in PNG & PDF exports in Safari

v2.17.2

Most chart components

• Add exposed method getImage which programmatically returns the dataUri of the chart

const chart = ref<InstanceType<typeof VueUiXy>>(null)

onMounted(async () => {
  if (chart.value) {
    const { 
      imageUri,
      base64,
      title, // as provided by your configuration in title.text
      width,
      height,
      aspectRatio
    } = await chart.value.getImage({ scale: 2 }) // optional scale param, defaults to 2, increase for better image quality
    console.log(imageUri)
  }
})

• Existing getData exposed method is now a Promise

const chart = ref<InstanceType<typeof VueUiXy>>()

onMounted(async () => {
  if (chart.value) {
    const data = await chart.value.getData()
    console.log(data)
  }
})

All components with pdf & image user options

• Expose PNG imageUri in pdf and img user options callbacks

const config = ref({
  userOptions: {
    callbacks: {
      // Override the default PDF and IMG generation to use your own solution 
      pdf: ({ imageUri, base64 }) => {
        console.log(imageUri) // will log when clicking on the user options menu PDF button
      },
      img: ({ imageUri, base64 }) => {
        console.log(imageUri) // will log when clicking on the user options menu IMG button
      }
    }
  }
})

Note: the old base64 exposed data is still available, returning a uri with a svg+xml prefix, which is not compatible with libs like pdfMake, contrary to imageUri, which returns a png type.

Add config options to control the display of values and percentages in the legends of some charts

const config = ref({
  style: {
    chart: {
      legend: {
        showValue: true,
        showPercentage: true
      }
    }
  }
})

The following components are concerned:

• VueUiDonut
• VueUiNestedDonuts
• VueUiDonutEvolution
• VueUiWaffle
• VueUitreemap
• VueUiRings
• VueUiGalaxy

VueUiDonut & VueUiNestedDonuts

• Add autoSize exposed function.
  The svg area has an overflow: visible set, to allow for big dataLabels to be visible in all cases.
  However, when converting the svg to an image (during a print to PNG or PDF for example), overflow gets ignored and labels cropped.
  Using autoSize before calling the print resizes the viewBox of the svg to fit all its contents. The resulting svg might not be centered anymore, but will feature all its elements uncut. After the print has finished, you can reset the chart by updating a key on the component.

const chart = ref<InstanceType<typeof VueUiDonut>>()

onMounted(() => {
  if (chart.value) {
    chart.value.autoSize()
  }
})

Legends

• Improve css on legend items, to avoid weird wrapping when converted to PNG or PDF

v2.16.5

VueUiStackbar

• Enable usage of dataLabels.hideUnderPercentage in value mode (see v2.16.3). Setting a percentage will hide labels when the value is below max value * percentage (max value being the current max visible value, also when segregating series from the legend).

v2.16.4

VueUiXy

• Fix harmless console errors in some edge cases where data is empty

getVueDataUiConfig utility function

• Improve TS type: use a generic, no more 'as' casting required

Before:

const config = ref(getVueDataUiConfig('vue_ui_donut') as VueUiDonutConfig);

After:

const config = ref(getVueDataUiConfig<VueUiDonutConfig>('vue_ui_donut'));

User options menu

• Set a min-width (in some rare environments, the user options menu button and drawer could have no width, leading to an invisible menu)

v3.0.0-next.0

v3.0.0-next.0 pre-release

This prerelease is the first step toward our 3.x line, focused exclusively on improving layouts and responsive features across every component.

⚠️ Note: This is a prerelease. APIs may shift between 3.0.0‑next.0 and the final 3.0.0. We strongly encourage you to try it out, share feedback, and report any issue you encounter. It is not recommended to use it in production.

npm i vue-data-ui@next

---

VueUiXy

v3.0.0-next.0 includes the following changes for VueUiXy:

• Layout is automatically computed so you don't have to tweak paddings to fit scale labels, time labels and axis labels anymore.
• Configuration changes (possible breaking changes):
  • config.chart.padding defaults are now set to 0 for top, right, bottom, left.

Components affected:

• VueUiXy
• VueUiRidgeline (embedded VueUiXy config padding was also modified)

v2.16.3

VueUiStackbar

• Add new config options:

const config = ref({
  style: {
    chart: {
      bars: {
        dataLabels: {
          hideUnderValue: null, // or number
          hideUnderPercentage: null, // or number, ej. 50 for 50%; used when showDistributedPercentage is true
        },
      },
      grid: {
        x: {
          // style horizontal grid lines
          linesColor: '#E1E5E8',
          linesThickness: 1,
          linesStrokeDasharray: 0
        },
        y: {
          // style vertical grid lines
          linesColor: '#E1E5E8',
          linesThickness: 1,
          linesStrokeDasharray: 0
        }
      }
    }
  }
})

Docs are up to date