graphieros/vue-data-ui v2.3.41

on GitHub

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.