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:

v2.4.44

VueUiDonut #141

• Fix percentage display error in legend after multiple clicks - by @mnenie

VueUiXy

• Minor design improvement in tooltip and legend markers