v2.4.38

VueUiGauge

Add config attributes to further control labels:

config.style.chart.layout.markers.show: boolean; // default: true
config.style.chart.layout.markers.prefix: string; // default: ""
config.style.chart.layout.markers.suffix: string; // default: ""
config.style.chart.layout.markers.formatter: Function | null ; // default: null
config.style.chart.legend.show: boolean; // default: true

Reminder on how to use the formatter:

const config = ref({
   style: {
     chart: {
       layout: {
         markers: {
           formatter: ({ value }) => {
             return `my string ${value}`
           }
         }
       }
     }
   }
})

v2.4.37

New component: VueUiHistoryPlot

Visualize the dynamic journey of two variables over time, with every point telling a story of change and connection in two-dimensional space.

Check out the docs
A chart builder is also available!

VueUiCarouselTable

• Fix regression causing caption to move
• Add config attribute to control the table background color:

config.tbody.backgroundColor: string; // default: "#FFFFFF"

VueUiTableSparkline

• Fix textAlign issues
• Add config attribute to hide color markers in first TD:

config.tbody.showColorMarker: boolean; // default: true

• Improve selection behaviour
• Add config options to control the background color of selected cells:

config.tbody.selectedColor.useSerieColor: boolean; // default: true
config.tbody.selectedColor.fallback: string; // default: #E1E5E8, applied when useSerieColor is set to false

• Add config options to control chart dimensions:

config.sparkline.dimensions.width: number; // default: 150
config.sparkline.dimensions.heightRatio: number; // default: 1

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