v2.1.64

VueUiXy

Added more config options:

config.chart.timeTag to display the x value at selected index. (Define all time values in config.chart.grid.labels.xAxisLabels.values). If values are not defined, the selectedIndex will be displayed.

timeTag: {
  show: boolean; // default: false
  backgroundColor: string; // default #E1E5E8
  color: string; // default: #2D353C
  fontSize: number; // default: 12
  circleMarker: {
    color: string; // default: #2D353C
    radius: number: // default: 3
  }
}

Also added options in config.chart.highlighter to display a vertical line when hovering on the chart:

highlighter: {
  ...,
  useLine: boolean; // default: false
  lineDasharray: number; // default: 2
  lineWidth: number; // default: 1
}

v2.1.62

VueUiXy

Added further customization options in stacked mode:

1. Dataset: datapoints can have the following optional attributes:

• autoScaling: boolean; // Will attempt to produce the best individual scale from the datapoints
• stackRatio: number; (0 to 1) // Force the height ratio of the datapoint to take a larger | smaller height size on the chart. If not all datapoints have a stackRatio, it will be computed from the remaining space available

2. Config:

• Added config.chart.grid.labels.xAxis.showBaseline (boolean; default: true), to display the base x axis line

v2.1.60

VueDataUi universal component was refactored to use dynamic imports, to only use the selected component, which will reduce bundle size.

v2.1.58

VueUiTableHeatmap

• Added optional datapoint attributes to be passed in the dataset to display shapes and colors:

const dataset = [
  {
    name: "Serie 1",
    values: [1, 2, 3, 4],
    color: "#6376DD",
    shape: "star" // "circle", "triangle", "square", "diamond", "pentagon", "hexagon", "star"
  },
  ...
]

• Also added config.style.shapeSize (default: 14) to control... shape sizing.

v2.1.57

VueUiDonut

• Fixed donut thickness config option not applied (config.style.chart.layout.donut.strokeWidth)
• Also added config.style.chart.layout.labels.hollow.show : boolean; (default: true), that can be set to false to create a pie chart with a sufficient donut thickness applied

v2.1.56

Technical release

VueUiXy:
. Fixed harmless errors when using time zoom with series that have no datapoint in the selected timeframe

VueUiSparkStackbar:
. Fixed bad type naming

v2.1.55

VueUiXy

Added further configuration options for individual scale mode (more details on this mode in v2.1.54 and v2.1.52)

config.chart.grid.labels.yAxis.stacked: boolean; (default: false)
config.chart.grid.labels.yAxis.gap: number; (default: 64)

These 2 config options must be used in combination with config.chart.grid.labels.yAxis.useIndividualScale set to true

The individual scaling range and their labels can be tweaked directly in dataset objects for individual datapoints (see point .2 in this release regarding scaleSteps attribute)

v2.1.54

VueUiXy

Added further individual scale customization in datapoint objects:

{
  ...,
  scaleMin?: number; // control the starting value of the individual scale
  scaleMax?: number; // control the max value of the scale (acts like an offset Y of sorts)
}

To be used in combination with config.chart.grid.labels.yAxis.useIndividualScale : true (see this release for more details)

v2.1.53

VueUiXy fixes:

• Fixed yLabel positioning issues
• Fixed data table in sparkline mode wrong behavior when toggling time range
• Added config options to adjust offsets of yLabel & xLabel:

config.chart.grid.labels.axis.yLabelOffsetX: number;
config.chart.grid.labels.axis.xLabelOffsetY: number;

v2.1.52

VueUiXy

It is now possible to display individual y axis scales for multiple series.

1. Config: new attributes added in config.chart.grid.labels:

yAxis: {
  commonScaleSteps: number; (default: 10)
  useIndividualScale: boolean; (default: false)
  labelWidth: number; (default: 40) // sets the width for each scale strip
}

2. Dataset: additional optional attributes can be passed to datapoint objects:

{
  ...,
  scaleSteps: number; // if not used, commonScaleSteps will be applied
  scaleLabel: string; // if used, will be placed next to the series' name on the scale strip
}

Example in the docs

Many thanks to @focussing who inspired this improvement.