v2.4.73

VueUiXy & VueUiQuickChart

Add config option to show vertical zoom handles in minimap mode.
This new option is set to false by default, therefore no breaking change to your current designs.

VueUiXy

config.chart.zoom.minimap.verticalHandles: boolean; // default: false

VueUiQuickChart

config.zoomMinimap.verticalHandles: boolean; // default: false

Improve zoom dragging for large datasets

Enregistrement.de.l.ecran.2025-01-12.a.17.23.16.mov

v2.4.71

New celebration and celebrationNight themes

A few screenshots to give you a taste of these new themes:

Check out the Themes tab in the docs pages

Celebration palettes can be retrieved through the getPalette utility function:

import { getPalette } from "vue-data-ui";

const celebrationPalettes = computed(() => {
  return {
    celebration: getPalette('celebration'),
    celebrationNight: getPalette('celebrationNight')
  }
});

v2.4.69

VueUiVerticalBar

• Add a 'none' sort option to show data in the same order as passed to the component
• Toggling the sort in user options now toggles from 'desc' | 'asc' | 'none'

config.style.chart.layout.bars.sort: 'desc' | 'asc' | 'none'; // default: 'desc' (unchanged default)

v2.4.68

new #pattern scoped slot

The #pattern slot is available for the following components:

• VueUiDonut
• VueUiGauge
• VueUiRings
• VueUiStackbar
• VueUiVerticalBar
• VueUiWaffle
• VueUiXy

This slot allows you to include a pattern element to customize the looks of your datapoints, which will be injected inside a defs element of the component.

The slot exposes the following data:

• seriesIndex to target a specific datapoint
• patternId to apply on the pattern element for it to be recognized by the component

Here is an example of implementation on VueUiDonut, where a pattern will be applied on the first datapoint only:

<VueUiDonut :dataset="dataset" :config="config">
  <template #pattern="{ seriesIndex, patternId }">
    <pattern v-if="seriesIndex === 0" :id="patternId" width="50.222" height="29.003" patternTransform="scale(1)" patternUnits="userSpaceOnUse"><rect width="100%" height="100%" fill="#2b2b3100"/><path fill="none" stroke="#1A1A1A" stroke-linecap="square" d="M58.592-14.503h-16.74m6.277 3.627H56.5l4.188 7.25h-8.373zM60.686 3.623l-4.187 7.25h-8.372l4.187-7.25zM41.852-7.252l4.185 7.25-4.185 7.252L37.666 0zm25.11 7.25L58.593 14.5h-16.74L33.481-.001l8.371-14.501m16.74-.001 8.37 14.502m0 0h-16.74v0m-8.37-14.501L50.222 0l-8.37 14.503M8.371-14.502H-8.37m6.276 3.627h8.371l4.188 7.25H2.093zM10.464 3.624l-4.186 7.25h-8.373l4.187-7.25zM-8.37-7.251-4.185 0-8.37 7.252-12.556 0zM16.74 0 8.37 14.502H-8.37L-16.742 0l8.371-14.501m16.74-.001L16.741-.001m0 0H.001v0m-8.37-14.501L0 0l-8.37 14.503m6.275 3.625h8.372l4.187 7.25H2.093zm12.558 14.499-4.187 7.25h-8.372l4.187-7.25zM-8.371 21.752l4.185 7.25-4.185 7.252-4.185-7.251zm25.112 7.25L8.37 43.504H-8.37l-8.371-14.502 8.37-14.501M8.37 14.5l8.372 14.502m0 0H0v0m-8.37-14.5L0 29.003l-8.37 14.503m56.5-25.379 8.371.001 4.188 7.25h-8.373zm12.557 14.5L56.5 39.876l-8.372.001 4.187-7.25zM41.852 21.751l4.185 7.25-4.185 7.252-4.186-7.252zm25.11 7.25-8.37 14.502h-16.74l-8.372-14.5M58.59 14.5l8.372 14.503m0 0h-16.74v0m-8.371-14.501 8.37 14.501-8.37 14.503M33.482 0h-16.74m6.276 3.627 8.371.001 4.188 7.25h-8.373zm12.557 14.5-4.187 7.249-8.372.001 4.187-7.25zM16.741 7.25l4.185 7.25-4.185 7.252-4.186-7.252zm25.11 7.25-8.37 14.502h-16.74M41.851 14.5h-16.74v0M16.742 0l8.37 14.502-8.37 14.503"/></pattern>
  </template>
</VueUiDonut>

A few screenshots taken from the examples page:

Component	Screenshot
VueUiXy
VueUiDonut
VueUiGauge

The patterns used in these examples are adapted from the cool patterns available for free on pattern.monster

new VueUiPattern utility component

A set of 12 readymade patterns are available through this utility component (list of names on the README)
Check out the documentation website for more details on how to use VueUiPattern

import { VueUiPattern } from "vue-data-ui";

<VueUiDonut :dataset="dataset" :config="config">
  <template #pattern="{ seriesIndex, patternId }">
    <Suspense>
      <VueUiPattern
        :id="patternId"
        name="maze"
        v-if="seriesIndex === 0"
      />
    </Suspense>
  </template>
</VueUiDonut>

v2.4.64

Additional zoom features #153

• New config attributes are added to all charts bearing a zoom feature:

zoom.enableRangeHandles: boolean; // default: true
zoom.enableSelectionDrag: boolean; // default: true: allow dragging of the zoom selection (see video below)

For VueUiQuickChart, these config attributes are the following:

zoomEnableRangeHandles: boolean; // default: true
zoomEnableSelectionDrag: boolean; // default: true

These attributes allow :

• the user to drag a zoom selection, which is easier than using the range input handles

• you to freeze a zoom selection (using the existing zoom.startIndex and zoom.endIndex attributes, to set zoom.enableRangeHandles: false, so the user will be able to drag a frozen zoom selection range)

• you to opt out of the drag feature, by setting zoom.enableSelectionDrag: false

The zoom feature is available on the following components:

• VueUiCandlestick
• VueUiDonutEvolution
• VueUiQuickChart
• VueUiStackbar
• VueUiXy
• VueUiXyCanvas

The video below shows the default zoom configuration, with both attributes set to true, on the VueUiXy component :

Enregistrement.de.l.ecran.2025-01-02.a.18.26.46.mov

Fix harmless svg console errors in some cases when the chart is being computed

• VueUiSparkline
• VueUiStackbar

v2.4.62

VueUiSparkline

• Add scaleMin and scaleMax config attributes:

config.style.scaleMin: number | null; // default: null
config.style.scaleMax: number | null; // default: null

This comes handy when stacking sparklines for different series where comparison is required.

• Add padding config attributes:

config.style.padding: {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

v2.4.60

Customizable chart background

A new slot was added on most components to customize background (image, gradient, etc.)

<VueUiXy :dataset="dataset" :config="config">
  <template #chart-background>
    <div :style="{ height: '100%', width: '100%' }">
      <img src="space.png" alt="space" class="h-full w-full object-cover">
    </div>
  </template>
</VueUiXy>

v2.4.58

VueUiGauge

• Fix: always start the animation from the smallest from value.

v2.4.57

VueUiStackbar #150

• Fix NaN% label
• Add config options to display or hide empty values or percentages:

config.style.chart.bars.dataLabels.hideEmptyValues: boolean; // default: false
config.style.chart.bars.dataLabels.hideEmptyPercentages: boolean; // default: false

v2.4.56

VueUiDonut, VueUiWaffle, VueUiQuickChart (donut mode)

• Improve serie segregating animation timing, making it more consistent and smoother.

VueUiCarouselTable

• Add marquee animation option in the config.animation:

animation: {
  type: 'scroll' | 'marquee'; // default: 'scroll'
}

Enregistrement.de.l.ecran.2024-12-27.a.08.52.46.mov