v3.22.5

VueUiHistoryPlot

Add optional per-series temperature colors #361

const dataset = computed<VueUiHistoryPlotDatasetItem[]>(() => [
  {
    name: 'Series A',
    values: [
      { x: 355, y: 2.3, label: "January" },
      { x: 112, y: 1.2, label: "February" },
      { x: 313, y: 0.4, label: "March" },
      { x: 555, y: 1.2, label: "April" },
     ],
     temperatureColors: ['#FF0000', '#00FF00'], // new, any number of colors are possible
     temperatureAngle: 0, // new: 0 = top -> bottom; 90 = left -> right; 180 = bottom -> top; etc)
     usePlotTemperatureColors: true, // if true, plots also have the temperature color
     temperatureIndependant: false, // if true, the temperature colors will depend on the min/max of the series
  }
])

View example

Add option to display curved lines #358

This option is also to be used in the dataset definition:

const dataset = computed<VueUiHistoryPlotDatasetItem[]>(() => [
  {
    name: 'Series A',
    values: [
      { x: 355, y: 2.3, label: "January" },
      { x: 112, y: 1.2, label: "February" },
      { x: 313, y: 0.4, label: "March" },
      { x: 555, y: 1.2, label: "April" },
     ],
     smooth: true, // new
  }
])

View example

Highlight the full series on hover #360

VueUiStripPlot #359

Add new types of display: 'scatter' or 'violin', the current default being 'classic'.

Scatter type

const config = computed<VueUiStripPlotConfig>(() => ({
  type: 'scatter'
}))

View example

Violin type

const config = computed<VueUiStripPlotConfig>(() => ({
  type: 'violin'
}))

View example

Config options are added to deeply customize the violin styles:

const config = computed<VueUiStripPlotConfig>(() => {
    style: {
        chart: {
            violin: {
                widthRatio: 1,
                strokeWidth: 1,
                opacity: 0.2,
                strokeOpacity: 0.35,
                useSerieColor: true,
                stroke: '#5A5A5A',
                fill: '#5A5A5A',
                boxPlot: {
                    show: true,
                    widthRatio: 1,
                    useSerieColor: true,
                    color: '#5A5A5A',
                    medianCircleRadiusRatio: 1,
                    medianCircleFill: '#FFFFFF',
                },
                tooltipLabels: {
                    upperAdjacent: 'Upper adjacent',
                    q3: 'Q3',
                    median: 'Median',
                    q1: 'Q1',
                    lowerAdjacent: 'Lower adjacent',
                    iqr: 'IQR',
                    count: 'Count',
                    },
            }
        }
    }
})

Other

• Fixed extra bottom white space appearing on PNG prints when the chart contains a zoom range slider.