v2.4.66

new #pattern scoped slot

The #pattern slot is available for the following components:

• VueUiDonut
• VueUiGauge
• VueUiRings
• VueUiStackbar
• VueUiVerticalBar
• 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

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: