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.

v2.3.39

VueUiKpi : fix regression related to value rounding

v2.3.37

This release fixes errors in type definitions and config defaults.

Using the chart builder, you might need to nuke your localStorage to reset defaults.

v2.3.35

This release adds the option to display the value as analog numbers in VueUiKpi :

Enregistrement.de.l.ecran.2024-10-23.a.18.01.46.mov

Docs and chart builder are up to date.

v2.3.34

This release adds support for negative values to the following charts:

• VueUiStackbar
• VueUiVerticalBar

See #88

Documentation website is up to date.

Enregistrement.de.l.ecran.2024-10-22.a.15.57.36.mov

Enregistrement.de.l.ecran.2024-10-22.a.16.04.38.mov

v2.3.31

VueUiParallelCoordinatePlot : add formatters (see v2.3.30)

VueUiWaffle: fix regression preventing the use of the #cell slot