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.

v2.3.41

This release introduces several improvements to VueUiXy:

1. Multiple highlight areas:

Highlight areas are still defined on the same config chart.highlightArea attribute. The previous implementation accepted the following configuration (which still works):

highlightArea: {
  show: true,
  from: 2,
  to: 2,
  color: '#00FF00',
  opacity: 20,
  caption: {
    text: 'AREA 1',
    fontSize: 12,
    color: '#1A1A1A',
    bold: false,
    offsetY: 0,
    width: 'auto',
    padding: 3,
    textAlign: 'center'
  }
}

Now you can pass an array of highlight areas:

highlightArea: [
  {
    show: true,
    from: 2,
    to: 2,
    color: '#00FF00',
    opacity: 20,
    caption: {
      text: 'AREA 1',
      fontSize: 12,
      color: '#1A1A1A',
      bold: false,
      offsetY: 0,
      width: 'auto',
      padding: 3,
      textAlign: 'center'
    },
  {
    show: true,
    from: 3,
    to: 4,
    color: '#FF0000',
    opacity: 20,
    caption: {
      text: 'AREA 2,
      fontSize: 12,
      color: '#1A1A1A',
      bold: false,
      offsetY: 0,
      width: 'auto',
      padding: 3,
      textAlign: 'center'
    },
  }
]

2. Optional positioning of the grid on the x axis

A new config attribute was added to choose the position of the grid relative to the datapoints: chart.grid.position, with 2 possible values: "middle" or "start". The default is "middle", which corresponds to the previous behavior.

"middle" (default):

"start":

3. Chart border

A new config attribute was added to frame the chart area: chart.grid.frame:

frame: {
  show: boolean // default: false
  stroke: string // default: "#E1E5E8"
  strokeWidth: number // default: 2
  strokeLinecap: "round" | "square" | "butt" // default: "round"
  strokeLinejoin: "round" | "arcs" | "bevel" | "miter" | "miter-clip" // default: "round"
  strokeDasharray: number // default: 0
}

4. Y axis scale

Y axis scale now shows the extreme values, while keeping a zero based approach, and showing the nicest possible scale.