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

v2.4.54

User options menu display state #148

Add config options to control the state of the user options menu:

userOptions: {
  show: boolean, // Not new. Has to be true for these new options to be applied. Is true by default
  showOnChartHover: boolean; // New option. Default: false. Set to true to only show the burger menu when hovering the component
  keepStateOnChartLeave: boolean; // New option. Default: true. Set to false to always close the menu when hovering out the component
}

VueUiTableSparkline #144

• Display buttons for each sorting order
• Fix regressions in responsive mode

v2.4.50

VueUiTableSparkline #144

• Add config options to control which columns can be sorted:

config.sortedDataColumnIndices: number[]; // default: []
config.sortedSeriesName: boolean; // default: false
config.sortedSum: boolean; // default: false
config.sortedAverage: boolean; // default: false
config.sortedMedian: boolean; // default: false
config.resetSortOnClickOutside: boolean; // default: false

Example, if your table looks like this:

Series	COL 1	COL 2	COL 3	Total	Average	Median
s1	0	1	2	3	1	1

• To make COL 1 and COL 2 sortable, set sortedDataColumnIndices: [0, 1]
• To make the Series column sortable; set sortedSeriesName: true
• To make the Total column sortable, set sortedSum: true
• To make the Average column sortable, set sortedAverage: true
• To make the Median column sortable, set sortedMedian: true

v2.4.47

VueUiGauge #142

Add optional segment labels.

New dataset attribute name for dataset series

const dataset = ref({
    base: 12250, // optional
    value: 4.2,
    series: [
        {
            from: 1,
            to: 3,
            color: "#ff6400", // optional
            name: 'bad', // optional
            nameOffsetRatio: 1.1 // optional, to offset an individual name label and avoid label overlapping if segments are narrow
        },
        {
            from: 3,
            to: 4,
            color: "#5f8bee",
            name: 'acceptable'
        },
        {
            from: 4,
            to: 5,
            color: "#42d392",
            name: 'very good'
        },
    ]
})

It is possible to set individual offset for name labels, using the nameOffsetRatio dataset attribute:

New configuration attributes for segment labels:

config.style.chart.layout.segmentNames: {
  show: boolean; // default: true
  curved: boolean; // default: true
  offsetRatio: number; // default: 1.1
  fontSize: number; // default: 16
  useSerieColor: boolean; // default: true
  color: string; // default: "#2D353C"
  bold: boolean; // default: false
}

• A new config attribute was also added to control the radius of the gauge:

config.style.chart.layout.radiusRatio: number; // default: 1

• New config attributes are added to display separators between segments:

config.style.chart.layout.segmentSeparators: {
  show: boolean; // default: false
  offsetOut: number; // default: 0
  offsetIn: number; // default: 0
  stroke: string; // default: "#2D353C"
  strokeWidth: number; // default: 2
}

Here is an example of usage for separators (check out the examples page):

Documentation is up to date
Chart builder too:)

An example of cool stuff that can be done now with VueUiGauge: