v2.4.27

VueUiCarouselTable

New config options to control the display of the scrollbar:

config.scrollbar.showOnlyOnHover: boolean; // default: false
config.scrollbar.hide: boolean; // default: false

see #129

v2.4.26

New component: VueUiFunnel

A funnel chart is a unique chart type that illustrates the progression of users through a business or sales process. Its name reflects its shape, beginning with a wide top and tapering to a narrow bottom. The funnel's width at each stage represents the number of users, decreasing as the process advances.

Classic funnel charts generally use a "realistic" funnel shape, which makes it hard for the brain to compare sizes. This funnel chart is designed to make it easy to compare stages, using simple bars.

The documentation website is up to date.

A chart maker is also available !

v2.4.25

VueUiCanvas : custom scales

• Set a custom scale in non stack mode (default) through the following new config attributes:

style.chart.scale.min: number | null; // default: null
style.chart.scale.max: number | null; // default: null

• Set custom scales on each dataset item (applied when stack mode is true), through the following new dataset attributes:

scaleMin: number | null;
scaleMax: number | null;

• Show vertical lines at same index as time labels on large datasets

Docs are up to date.

v2.4.22

VueUiCanvas

• Fix dataset reactivity issue

v2.4.21

All charts with minimap in zoom

• Fix layout shift occurring on the minimap on chart re-rendering

VueUiIcon

• Add "boxes" icon

v2.4.17

VueUiParallelCoordinatePlot

• Increase the capture area of tooltip traps to facilitate user selection

---

All components with optional minimap in zoom

• Fix harmless occasional console error

---

VueUiWordCloud

• Set text elements dominant-baseline to 'central'

---

User options built-in annotator

• Improve color picker

v2.4.14

VueUiXy

• Show time tag (if set to show: true) when hovering minimap
• Show datapoints when hovering minimap

v2.4.11

Big data optimization

Very large datasets (> 5k or > 10k datapoints) will cause the browsers rendering engines to slow down, caused by too many SVG DOM elements to render.

The following charts use the LTTB algorithm (Largest-Triangle-Three-Bucket) beyond a certain threshold to downsample the rendered dataset while preserving its shape. These components are the most susceptible to be used with very large datasets:

Component	Default Threshold	Remark
VueUiXy	500
VueUiXyCanvas	10000	Since this chart uses canvas, threhsold can be set higher
VueUiQuadrant	500
VueUiScatter	500
VueUiSparkline	500
VueUiSparkTrend	500

The downsample threshold for each component can be set in the config prop passed to components:

const config = ref({
  downsample: {
    threshold: 500,
  },
  ...// rest of your config
})

This optimization answers #123

Check out this paper about LTTB, page 21 if you are curious

v2.4.10

VueUiXy

Minor fix: position datapoint labels correctly when value is 0.

v2.4.9

VueUiSparkStackbar

Add optional tooltip:

const config = ref<VueUiSparkStackBarConfig>({
  style: {
    ..., // rest of your config
    tooltip: {
      show: boolean; // default: true
      backgroundColor: string; // default: "#FFFFFF"
      color: string; // default: "#2D353C"
      fontSize: number; // default: 14
      customFormat: null | Function; // default: null *
      borderRadius: number; // default: 4
      borderColor: string; // default: "#E1E5E8"
      borderWidth: number; // default: 1
      position: "left" | "center" | "right"; // default: "center"
      offsetY: number; // default: 24
    }
  }
})

*check out v2.0.6 to see how to use custom format

---

Built-in annotator improvement

(see v2.4.2 for details on this feature)
Now the path is smoothed and optimized while drawing, to auto correct the noise that occurs when using a mouse to draw paths.