v3.1.10

Follow-up to v3.1.8

• Improve minimap performance for VueUiXy and VueUiQuickChart zoom
• Apply optional cutNullValues set on VueUiXy on minimap lines

v3.1.8

VueUiXy, VueUiQuickChart : compact minimap with all visible series

Enregistrement.de.l.ecran.2025-09-16.a.14.02.34.mov

VueUiXy

const config = ref({
  chart: {
    zoom: {
      minimap: {
        show: true,
        compact: true, // new (default true, set to false to get previous design)
        merged: false, // new (default false, shows all series. Set to true to get previous design)
        frameColor: '#A1A1A1' // new (set frame color when compact = true)
      }
    }
  }
})

VueUiQuickChart

const config = ref({
  zoomMinimap: {
    show: true,
    compact: true, // new (default true, set to false to get previous design)
    merged: false, // new (default false, shows all series. Set to true to get previous design)
    frameColor: '#A1A1A1' // new (set frame color when compact = true)
  }
})

VueUiTable - Add filename input field in export menu #250

An optional default filename can be set in config.style.exportMenu.filename (default: '')

VueUiNestedDonuts

Fix inverted donut names on Firefox

v3.1.7

VueUiXy - Custom gradients

New slots are available to use custom gradients on areas and bars.

#area-gradient & #bar-gradient slots

Use these slots to inject a gradient svg element (linearGradient, radialGradient) into the pre-existing defs element of the chart.
Slots expose the series data, as well as the id that must be used on the gradient to be recognized and applied.

<VueUiXy
  :dataset="dataset"
  :config="config"
>
  <!-- This slot is applied on all line series with useArea set to true -->
  <template #area-gradient="{ series, id }">
    <linearGradient :id="id" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" :stop-color="series.color"/>
      <stop offset="100%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
    </linearGradient>
  </template>

  <!-- This slot is applied on all bar series -->
  <template #bar-gradient="{ series, positiveId, negativeId }">
    <!-- Gradient applied for positive datapoints -->
    <linearGradient :id="positiveId" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" :stop-color="series.color"/>
      <stop offset="100%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
    </linearGradient>

    <!-- Gradient applied for negative datapoints -->
    <linearGradient :id="negativeId" x1="0" x2="0" y1="0" y2="1">
       <stop offset="0%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
       <stop offset="100%" :stop-color="series.color"/>
    </linearGradient>
  </template>
</VueUiXy>

Documentation & examples are up to date

v3.1.6

Built-in chart data tables

• Hide data tables from the DOM when userOptions.buttons.table is false

v3.1.5

Tooltips

• Improve performance
• Add config options to control smooth params:

tooltip: {
    smooth: true,
    smoothForce: 0.18, // New. Lower = slower
    smoothSnapThreshold: 0.25 // New
}

Zoom (double range input)

• Fix offset from the client position when dragging a zoom selection

v3.1.4

VueUiTable #248

• Add config option to show / hide export button

const config = ref({
  style: {
    exportMenu: {
      show: true, // new, default: true
    }
  }
})

• Add @page-change event, fired when pagination buttons are used (all buttons, range input and items-per-page select)

<VueUiTable
    :config="config"
    :dataset="dataset"
    @page-change="onPageChange"
/>

function onPageChange(pageData: VueUiTablePageChangeEvent) {
    const { 
        currentPage,
        totalPages,
        itemsPerPage,
        currentPageData
    } = pageData;

    console.log({ currentPage, totalPages, itemsPerPages, currentPageData });
}

v3.1.3

VueUiDashboard

• Set responsive font sizes for chart titles and legends

VueUiXy

• Prevent error when config is provided without the chart attribute

v3.1.2

VueUiDashboard improvements #246

• Add user options in config, with optional annotator; image and pdf

const config = ref({
  userOptions: {
    show: true,
    showOnChartHover: false,
    keepStateOnChartLeave: true,
    position: 'right',
    buttons: {
      pdf: true,
      img: true,
      annotator: true
    },
    callbacks: {
      pdf: null,
      img: null,
      annotator: null
    },
    buttonTitles: {
      pdf: 'Download PDF',
      img: 'Download PNG',
      annotator: 'Toggle annotator'
    },
    print: {
      scale: 2,
      filename: ''
    }
  }
})

User options callbacks:

const config = ref({
  userOptions: {
    // These callbacks will be called when user options buttons are clicked.
    callbacks: {
      pdf: (chart: HTMLElement) => {
        // use your own pdf solution
      },
      img: (base64: string) => {
        // do whatever you want with the base 64 image data of the chart
      },
      // all other buttons have also their callbacks (no params), with the same name as the button
    }
  }
})

PDF improvements

• The size of the PDF is based on config.style.board.aspectRatio (default: "1/1.4141", which is A4 in portrait mode)
• The file name can be set in config.userOptions.print.filename

Deprecated config options

• config.allowPrint is deprecated, but will still keep working. It is replaced with config.userOptions.show. It is recommended to make the change.
• config.style.resizeHandles.border is removed (was not applied anyway, so no breaking change here either)

v3.1.1

New feature - Data tables in dialog

Display chart's data tables inside a draggable and resizable dialog:

const config = ref({
  table: {
    show: false,
    useDialog: true, // New - default: false (previous behavior)
  }
})

Note: if table.show is set to true, the table will be displayed under the chart, even if table.useDialog is also set to true.

Enregistrement.de.l.ecran.2025-09-07.a.09.08.26.mov

This feature is available on all chart components config.table attributes

Documentation is up to date

v3.0.23

Legends

Harmonize marker sizes in legends.