v2.3.70

VueUiWheel & VueUiTiremarks

Fix reactivity issue raised in #100

v2.3.69

VueUiOnion

Fix wrong path calculation and janky css animation.
See #99

v2.3.68

Tooltips

When using tooltip.backgroundOpacity with a value < 100, show the tooltip background with a glassmorphism effect.

v2.3.67

VueUiXy and VueUiQuickChart

Improve minimap with:

. hovering the minimap shows a selector, and the corresponding area is highlighted on the main chart
. inversely when hovering the chart, corresponding zone is selected on the minimap

Enregistrement.de.l.ecran.2024-11-02.a.16.39.18.mov

v2.3.66

This release improves chart components stability when unprocessable values are passed into datasets (NaN, undefined, Infinity, -Infinity, null).

Whenever these values are present in a dataset, it is converted to 0, and in some useful cases, shown as a warning in the console.

v2.3.61

VueUiHeatmap

Add new config options to rotate xAxis labels, and only show them at given modulo.

config.style.layout.dataLabels.xAxis.rotation: number; // default 0
config.style.layout.dataLabels.xAxis.showOnlyAtModulo: number | null; // default: null

Documentation page and chart maker are up to date.

Enregistrement.de.l.ecran.2024-11-01.a.10.15.39.mov

v2.3.58

VueUiXy

Add optional minimap in zoom:

Enregistrement.de.l.ecran.2024-10-31.a.20.13.00.mov

Additional minimap attribute in config.chart.zoom:

minimap: {
  show: boolean; // default: false
  smooth: boolean; // default: false
  selectedColor: string; // default: "#1F77B4"
  selectedColorOpacity: number; // default: 0.2
  lineColor: string; // default: "#2D353C"
  selectionRadius: number; // default: 2
}

VueUiXy docs and chart maker are up to date.

---

VueUiQuickChart

Add optional minimap in config.zoomMinimap:

zoomMinimap: {
  show: boolean; // default: false
  smooth: boolean; // default: false
  selectedColor: string; // default: "#1F77B4"
  selectedColorOpacity: number; // default: 0.2
  lineColor: string; // default: "#2D353C"
  selectionRadius: number; // default: 2
}

---

VueUiDonut

Improve responsive proportions resizing

v2.3.46

VueUiStackbar (again)

New config attributes to force scales:

config.style.chart.grid.scale.scaleMin: number; // default: null
config.style.chart.grid.scale.scaleMax: number; // default: null

By default, scales are automatically computed from your dataset's min and max visible values.

v2.3.45

VueUiStackbar

A new config attribute was added to show bars horizontally or vertically:

const config = ref<VueUiStackbarConfig>({
   orientation: "vertical", // "vertical" | "horizontal"
   ... // rest of your config
})

Enregistrement.de.l.ecran.2024-10-27.a.16.24.59.mov

You can try it out here

v2.3.44

VueUiSparkline

New config attribute to make the chart responsive.

const config = ref({
  responsive: true, // default: false (chart resizes based on the width of the parent only)
  ... //rest of your config
})

Avoid placing a responsive chart inside a parent with dimensions set to 100% instead of fixed dimensions.

VueUiXy

New config attributes to force the Y axis scale min and max values:

chart.grid.labels.yAxis.scaleMin: number; // default: null
chart.grid.labels.yAxis.scaleMax: number; // default: null

Either one, both or none can be used to force scaling.
An example was added in the Use cases of the VueUiXy documentation page.