vue-data-ui

Interactive documentation

A user-empowering data visualization Vue components library for eloquent data storytelling.

Available components

Charts

• VueUiAgePyramid
• VueUiCandlestick
• VueUiChestnut
• VueUiChord
• VueUiCirclePack
• VueUiDonutEvolution
• VueUiDonut
• VueUiDumbbell
• VueUiFlow
• VueUiFunnel
• VueUiGalaxy
• VueUiGauge
• VueUiHeatmap
• VueUiHistoryPlot
• VueUiMolecule
• VueUiMoodRadar
• VueUiNestedDonuts
• VueUiOnion
• VueUiParallelCoordinatePlot
• VueUiQuadrant
• VueUiQuickChart
• VueUiRadar
• VueUiRelationCircle
• VueUiRidgeline
• VueUiRings
• VueUiScatter
• VueUiStackbar
• VueUiStripPlot
• VueUiThermometer
• VueUiTiremarks
• VueUiTreemap
• VueUiVerticalBar
• VueUiWaffle
• VueUiWheel
• VueUiWordCloud
• VueUiXyCanvas
• VueUiXy

Mini charts

• VueUiSparkHistogram
• VueUiSparkbar
• VueUiSparkgauge
• VueUiSparkline
• VueUiSparkStackbar
• VueUiSparkTrend
• VueUiGizmo
• VueUiBullet

3d

• VueUi3dBar

Tables

• VueUiTableHeatmap
• VueUiTableSparkline
• VueUiTable
• VueUiCarouselTable

Rating

• VueUiRating
• VueUiSmiley

Maps

• VueUiWorld

Utilities

• VueUiAccordion
• VueUiAnnotator
• VueUiCursor
• VueUiDashboard
• VueUiDigits
• VueUiIcon
• VueUiKpi
• VueUiMiniLoader
• VueUiSkeleton
• VueUiTimer

Installation

npm i vue-data-ui

You can declare components globally in your main.js:

1import { createApp } from "vue";
2import App from "./App.vue";
3// Include the css;
4import "vue-data-ui/style.css";
5
6// You can declare Vue Data UI components globally
7import { VueUiRadar } from "vue-data-ui";
8
9const app = createApp(App);
10
11app.component("VueUiRadar", VueUiRadar);
12app.mount("#app");

Or you can import just what you need in your files:

1<script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>

Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.

1<script setup>
2import { ref } from "vue";
3import { VueDataUi } from "vue-data-ui";
4// Include the css;
5import "vue-data-ui/style.css";
6
7const config = ref({...});
8const dataset = ref([...]);
9
10</script>
11
12<template>
13
14  <VueDataUi
15    component="VueUiXy"
16    :config="config"
17    :dataset="dataset"
18  />
19
20</template>
21

Note that the following utility components are not supported by the universal VueDataUi component and must be imported individually:

• Arrow
• VueUiIcon
• VueUiPattern

Typescript

Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.

Nuxt

This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt

Customizable tooltips

Charts with tooltips have a config option to customize tooltip contents:

1
2customFormat: ({ seriesIndex, datapoint, series, config }) => {
3  return `<div>${ ... }</div>`;
4}
5

Data formatting

Data labels can be customized using the formatter config attribute (since v2.3.29 on all chart components):

// the formatter attribute is generally placed under label or dataLabel config attribute objects

const config = ref({
  formatter: ({ value, config }) => {
    return `formatted ${value}`;
  }
})

Slots

#svg slot

Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).

1<VueUiXy :dataset="dataset" :config="config">
2  <template #svg="{ svg }">
3    <foreignObject x="100" y="0" height="100" width="150">
4      <div>This is a custom caption</div>
5    </foreignObject>
6  </template>
7</VueUiXy>

The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.

#legend slot (since v.2.0.41)

All charts expose a #legend slot except for:

• VueUiCirclePack
• VueUiDumbbell
• VueUiFlow
• VueUiFunnel
• VueUiHeatmap
• VueUiRelationCircle
• VueUiSparkHistogram
• VueUiSparkStackbar
• VueUiSparkbar
• VueUiSparkgauge
• VueUiSparkline
• VueUiThermometer
• VueUiTimer
• VueUiTiremarks
• VueUiWheel

The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it. It is recommended to set the show legend config attribute to false, to hide the default legend.

1<VueUiDonut :config="config" :dataset="dataset">
2  <template #legend="{ legend }">
3    <div v-for="item in legend">{{ legend.name }}</div>
4  </template>
5</VueUiDonut>

Tooltip #tooltip-before & #tooltip-after slots

Customize tooltip contents with #tooltip-before and #tooltip-after slots. It is that easy to include an image, another chart or any other content into your tooltips. It's an alternative to the config option tooltip.customFormat, in case richer tooltip content is needed.

Both slots expose the following object:

{
  datapoint,
  seriesIndex,
  series,
  config,
}

The following charts bear these slots:

• VueUiAgePyramid
• VueUiCandlestick
• VueUiDonut
• VueUiGalaxy
• VueUiHeatmap
• VueUiHistoryPlot
• VueUiMolecule
• VueUiNestedDonuts
• VueUiOnion
• VueUiParallelCoordinatePlot
• VueUiQuadrant
• VueUiQuickChart
• VueUiRadar
• VueUiRings
• VueUiScatter
• VueUiSparkStackbar
• VueUiStackbar
• VueUiTreemap
• VueUiVerticalBar
• VueUiWordCloud
• VueUiXy *
• VueUiXyCanvas
• VueUiwaffle
• VueUiWorld

* VueUiXy slots specifically expose the following additional attributes:

{
  ...,
  bars,
  lines,
  plots
}

1<VueUiDonut :config="config" :dataset="dataset">
2  <template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
3    <div>
4      This content shows first
5    </div>
6  </template>
7  <template #tooltip-after={ datapoint, seriesIndex, dataset, config }">
8    <div>
9      This content shows last
10    </div>
11  </template>
12</VueUiDonut>

The #tooltip-before & #tooltip-after slots also works when using the VueDataUi universal component, if the component it wraps supports them.

Add a watermark using the #watermark slot

You can use the #watermark slot to include any watermark content with your own styling. This slot exposes the isPrinting boolean you can use to display the watermark only when producing a pdf or an image.

1<VueUiDonut :config="config" :dataset="dataset">
2  <template #watermark="{ isPrinting }">
3    <div
4      v-if="isPrinting"
5      style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)"
6    >
7      WATERMARK
8    </div>
9  </template>
10</VueUiDonut>

Customization of the zoom reset button with the #reset-action slot

Available for the following components:

• VueUiQuickChart (for line & bar types only)
• VueUiXy
• VueUiDonutEvolution
• VueUiCandlestick
• VueUiWordCloud

The config option zoom.useResetSlot must be set to true to use the slot.

1<VueUiXy :config="config" :dataset="dataset">
2  <template #reset-action="{ reset }">
3    <button @click="reset()">RESET ZOOM</button>
4  </template>
5</VueUiXy>

Config

If for some reason you can't access the documentation website and need to get the default config object for a component:

1import { getVueDataUiConfig } from "vue-data-ui";
2
3const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");

Themes (since v2.2.9)

All charts are set by default without a theme, and use the default color palette.

5 themes are available for all charts:

• zen
• hack
• concrete
• celebration (v2.4.70+)
• celebrationNight (v2.4.70+)

Any color provided in dataset props will override the colors used by the theme for datapoints.

To use a theme, set the theme attribute of the config prop, for example:

1const donutConfig = ref({
2  theme: 'zen',
3  ...
4})

Available components : details

Type definitions are available in the vue-data-ui.d.ts file in the dist/types directory.

Universal component

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
VueDataUi	(depends on component)	(depends on component)	(depends on component)	(depends on component)	(depends on component)	(depends on component)

Quick chart

From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
VueUiQuickChart	VueUiQuickChartDataset	VueUiQuickChartConfig	@selectDatapoint, @selectLegend, generatePdf, generateImage, toggleTooltip	#legend, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background	✅	✅

Mini charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
VueUiSparkline	VueUiSparklineDatasetItem[]	VueUiSparklineConfig	@selectDatapoint	#svg, #before, #chart-background, #tooltip	✅	✅
VueUiSparkbar	VueUiSparkbarDatasetItem[]	VueUiSparkbarConfig	@selectDatapoint	#data-label, #title	❌	✅
VueUiSparkStackbar	VueUiSparkStackbarDatasetItem[]	VueUiSparkStackbarConfig	@selectDatapoint	#tooltip-before, #tooltip-after	✅	✅
VueUiSparkHistogram	VueUiSparkHistogramDatasetItem[]	VueUiSparkHistogramConfig	@selectDatapoint	#chart-background	❌	✅
VueUiSparkGauge	VueUiSparkGaugeDataset	VueUiSparkGaugeConfig	❌	#chart-background	❌	✅
VueUiSparkTrend	number[]	VueUiSparkTrendConfig	❌	#chart-background	❌	✅
VueUiGizmo	VueUiGizmoDataset	VueUiGizmoConfig	❌	❌	❌	❌
VueUiBullet	VueUiBulletDataset	VueUiBulletConfig	generatePdf, generateImg, getData	#svg, #legend, #watermark, #chart-background	❌	✅

Charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
VueUiAgePyramid	Array<Array<string / number>>	VueUiSparklineConfig	generatePdf, generateImage, generateCsv, toggleTable, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiCandlestick	Array<Array<string / number>>	VueUiCandlestickConfig	generatePdf, generateImage, generateCsv, toggleTable, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background	✅	✅
VueUiChestnut	VueUiChestnutDatasetRoot[]	VueUiChestnutConfig	@selectRoot, @selectBranch, @selectNut, getData, generatePdf, generateCsv, generateImage, toggleTable	#svg, #legend, #watermark, #chart-background	❌	✅
VueUiChord	VueUiChordDataset	VueUiChordConfig	@selectLegend, @selectGroup, @selectRibbon, getData, generatePdf, generateCsv, generateImage, toggleTable	#svg, #legend, #watermark, #chart-background, #pattern	❌	✅
VueUiCirclePack	VueUiCirclePackDatasetItem[]	VueUiCirclePackConfig	@selectDatapoint, getData, generatePdf, generateImage, generateCsv, toggleTable	#svg, #legend, #watermark, #chart-background , #pattern, #zoom-label, #data-label	✅	✅
VueUiDonutEvolution	VueUiDonutEvolutionDatasetItem[]	VueUiDonutEvolutionConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable	#svg, #legend, #reset-action, #watermark, #chart-background	❌	✅
VueUiDonut	VueUiDonutDatasetItem[]	VueUiDonutConfig	@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip	#svg, #legend, #dataLabel, #tooltip-before, #tooltip-after, #plot-comment, #watermark, #chart-background, #pattern	✅	✅
VueUiDumbbell	VueUiDumbbellDataset[]	VueUiDumbbellConfig	getData, generatePdf, generateCsv, generateImage, toggleTable	#svg, #legend, #watermark, #chart-background	❌	✅
VueUiFlow	VueUiFlowDatasetItem[]	VueUiFlowConfig	getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #legend, #watermark, #chart-background, #tooltip-before, #tooltip-after,	✅	✅
VueUiFunnel	VueUiFunnelDatasetItem[]	VueUiFunnelConfig	getData, generatePdf, generateCsv, generateImage, toggleTable	#svg, #watermark, #chart-background	❌	✅
VueUiGalaxy	VueUiGalaxyDatasetItem[]	VueUiGalaxyConfig	@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #legend,#tooltip-before, #tooltip-after, #chart-background	✅	✅
VueUiGauge	VueUiGaugeDataset	VueUiGaugeConfig	generatePdf, generateImage	#svg, #legend, #watermark, #chart-background, #pattern	❌	✅
VueUiHeatmap	VueUiHeatmapDatasetItem[]	VueUiHeatmapConfig	@selectDatapoint, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiHistoryPlot	VueUiHistoryPlotDatasetItem[]	VueUiHistoryPlotConfig	@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiMolecule	VueUiMoleculeDatasetNode[]	VueUiMoleculeConfig	@selectNode, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip	#node, #svg, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiMoodRadar	VueUiMoodRadarDataset	VueUiMoodRadarConfig	getData, generatePdf, generateCsv, generateImage, toggleTable	#svg, #legend, #watermark, #chart-background	❌	✅
VueUiNestedDonuts	VueUiNestedDonutsDatasetItem[]	VueUiNestedDonutsConfig	@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiOnion	VueUiOnionDatasetItem[]	VueUiOnionConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiParallelCoordinatePlot	VueUiParallelCoordinatePlotDatasetItem[]	VueUiParallelCoordinatePlotConfig	@selectLegend, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #plot-comment, #watermark, #chart-background	✅	✅
VueUiQuadrant	VueUiQuadrantDatasetItem[]	VueUiQuadrantConfig	@selectLegend, @selectPlot, @selectSide, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiRadar	VueUiRadarDataset	VueUiRadarConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiRidgeline	VueUiRidgelineDatasetItem[]	VueUiRidgelineConfig	@selectLegend, @selectX, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable	#svg, #legend, #time-label,#watermark, #chart-background, #pattern	❌	✅
VueUiRings	VueUiRingsDatasetItem[]	VueUiRingsConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background, #pattern	✅	✅
VueUiScatter	VueUiScatterDatasetItem[]	VueUiScatterConfig	getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiStackbar	VueUiStackbarDatasetItem[]	VueUiStackbarConfig	@selectLegend, @selectDatapoint, @selectTimeLabel, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip	#svg, #legend, #time-label, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background, #pattern	✅	✅
VueUiStripPlot	VueUiStripPlotDataset[]	VueUiStripPlotConfig	@selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiThermometer	VueUiThermometerDataset	VueUiThermometerConfig	generatePdf, generateImage	#svg, #watermark, #chart-background	❌	✅
VueUiTiremarks	VueUiTiremarksDataset	VueUiTiremarksConfig	generatePdf, generateImage	#svg, #legend, #watermark, #chart-background	❌	✅
VueUiTreemap	VueUiTreemapDatasetItem[]	VueUiTreemapConfig	@selectLegend, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #rect, #legend, #tooltip-before, #tooltip-after, #watermark, #breadcrumb-label, #breadcrumb-arrow	✅	✅
VueUiVerticalBar	VueUiVerticalBarDatasetItem[]	VueUiWheelConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleSort, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background, #pattern	✅	✅
VueUiWaffle	VueUiWaffleDatasetItem[]	VueUiWaffleConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip	#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #pattern	✅	✅
VueUiWheel	VueUiWheelDataset	VueUiWheelConfig	generatePdf, generateImage	#svg, #watermark, #chart-background	❌	✅
VueUiWordCloud	VueUiWordCloudDatasetItem[] / string	VueUiWordCloudConfig	getData, generatePdf, generateImage, generateCsv, toggleTooltip	#svg, #reset-action, #watermark, #tooltip-before, #tooltip-after, #chart-background	✅	✅
VueUiXyCanvas	VueUiXyCanvasDatasetItem[]	VueUiXyCanvasConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip	#legend, #tooltip-before, #tooltip-after, #reset-action, #watermark	✅	✅
VueUiXy	VueUiXyDatasetItem[]	VueUiXyConfig	@selectLegend, @selectX, @selectTimeLabel, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip	#svg, #legend, #time-label, #tooltip-before, #tooltip-after, #reset-action, #plot-comment,#watermark, #chart-background, #pattern	✅	✅

3D charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
VueUi3dBar	VueUi3dBarDataset	VueUi3dBarConfig	generatePdf, generateImage, toggleTable	#svg, #watermark, #chart-background	❌	✅

Maps

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
VueUiWorld	VueUiWorldDataset	VueUiWorldConfig	getData, generatePdf, generateImage, toggleTable, toggleTooltip, toggleAnnotator	#svg, #watermark, #pattern, #chart-background	✅	❌

Data tables

Name	dataset type	config type	emits / exposed methods	slots	themes
VueUiTable	VueUiTableDataset	VueUiTableConfig	❌	❌	❌
VueUiTableHeatmap	VueUiTableHeatmapDatasetItem[]	VueUiTableHeatmapConfig	generatePdf, generateCsv, generateImage	#caption, #rowTitle, #cell, #sum, #average, #median	✅
VueUiTableSparkline	VueUiTableSparklineDatasetItem[]	VueUiTableSparklineConfig	generatePdf, generateCsv, generateImage	❌	✅
VueUiCarouselTable	VueUiCarouselTableDataset	VueUiCarouselTableConfig	generatePdf, generateImage, generateCsv, toggleAnimation, pauseAnimation, resumeAnimation	#caption, #th, #td	❌

Rating

Name	dataset type	config type	emits / exposed methods	slots
VueUiRating	VueUiRatingDataset	VueUiRatingConfig	@rate, getData,toggleReadonly	#layer-under, #layer-above
VueUiSmiley	VueUiRatingDataset	VueUiSmileyConfig	@rate, getData,toggleReadonly

Utilities

Name	dataset type	config type	emits / exposed methods	slots
VueUiAccordion	❌	VueUiAccordionConfig	❌	#arrow, #title, #content
VueUiAnnotator	VueUiAnnotatorDataset	VueUiAnnotatorConfig	@toggleOpenState, @saveAnnotations	❌
VueUiCursor	❌	VueUiCursorConfig	❌	❌
VueUiDashboard	VueUiDashboardElement[]	VueUiDashboardConfig	@change	#content, #top, #bottom
VueUiDigits	number	VueUiDigitsConfig	❌	❌
VueUiKpi	number	VueUiKpiConfig	❌	#title, #value, #comment-before, #comment-after
VueUiMiniLoader	❌	VueUiMiniLoaderConfig	❌	❌
VueUiSkeleton	❌	VueUiSkeletonConfig	❌	❌
VueUiTimer	❌	VueUiTimerConfig	@start, @pause, @reset, @restart, @lap	#time, #controls, #laps, #chart-background
VueUiIcon	see below

Icons

Tailor made icons are available through the VueUiIcon component:

1<VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />

All names of available icons are available in the vue-data-ui.d.ts file under the VueUiIconName type.

User options

User options menu is accessible in the burger menu located on the top right of charts, and visible by default. To hide user options menu, set config.userOptions.show to false:

1const config = ref({
2  userOptions: {
3    show: false
4  },
5  ...
6})

User options menu can be set to appear only when hovering the component:

1const config = ref({
2  userOptions: {
3    show: true,
4    showOnChartHover: true, // Default: false
5    keepStateOnChartLeave: true, // Set to false to always close the menu when hovering out of the chart
6  },
7});

Predefined actions in user options menu depend on the type of chart. Some charts have more or less actions available. Action buttons contain an predefined icons by default.

To hide a given action, set the userOption.buttons, for example:

1const config = ref({
2  userOptions: {
3    show: true,
4    buttons: {
5      pdf: false,
6      fullscreen: false,
7      // all other actions will be visible by default (list of all actions below)
8    },
9  },
10});

You can use slots to override the content of action buttons. What happens when the button is clicked is taken care of by the component, except for the optionFullscreen slot.

1<VueUiDonut :config="config" :dataset="dataset">
2  <template #optionPdf> GENERATE PDF </template>
3
4  <!-- This is the only action where scoped content is provided -->
5  <template template #optionFullscreen="{ isFullscreen, toggleFullscreen }">
6    <div @click="toggleFullscreen(isFullscreen ? 'out' : 'in')">
7      TOGGLE FULLSCREEN
8    </div>
9  </template>
10</VueUiDonut>

You can pass a callback trhough the config, for each button, to override the default behavior:

1const config = {
2  userOptions: {
3    callbacks: {
4      pdf: (chartElement: HTMLElement) => {
5        console.log(chartElement);
6      },
7      img: (base64: string) => {
8        console.log(base64);
9      },
10      csv: (csvStr: string) => {
11        console.log(csvStr);
12      },
13      // the other atributes also have the same names as the buttons
14    },
15  },
16};

User options actions available per chart:

Chart name	User options actions slot names
VueUi3dBar	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiAgePyramid	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiBullet	optionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiCandlestick	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiCarouselTable	optionPdf, optionImg, optionCsv, optionAnimation, optionFullscreen
VueUiChestnut	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiChord	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiCirclePack	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiDonut	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiDonutEvolution	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiDumbbell	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiFlow	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiFunnel	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiGalaxy	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiGauge	optionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiHeatmap	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiHistoryPlot	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiMolecule	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiMoodRadar	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiNestedDonuts	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiOnion	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiParallelCoordinatePlot	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiQuadrant	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiQuickChart	optionTooltip, optionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiRadar	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiRelationCircle	optionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiRidgeline	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiRings	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiScatter	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiSparkHistogram	(no user options menu)
VueUiSparkStackbar	(no user options menu)
VueUiSparkTrend	(no user options menu)
VueUiSparkbar	(no user options menu)
VueUiSparkgauge	(no user options menu)
VueUiSparkline	(no user options menu)
VueUiStackbar	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiStripPlot	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiTableHeatmap	optionPdf, optionImg, optionCsv, optionFullscreen
VueUiTableSparkline	optionPdf, optionImg, optionCsv, optionFullscreen
VueUiThermometer	optionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiTiremarks	optionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiTreemap	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiVerticalBar	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator
VueUiWaffle	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiWheel	optionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiWordCloud	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiWorld	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiXy	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator
VueUiXyCanvas	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator

User options menu icon can be customized using the #menuIcon slot:

1<template #menuIcon="{ isOpen, color }">
2  <div>{{ isOpen ? 'close' : 'open' }}</div>
3</template>

Custom palette

It is possible to provide a custom palette in the config prop through config.customPalette (string[]) for the following components:

• VueUi3dBar
• VueUiChestnut
• VueUiChord
• VueUiCirclePack
• VueUiDonut
• VueUiDonutEvolution
• VueUiFlow
• VueUiGalaxy
• VueUiGauge
• VueUiHistoryPlot
• VueUiMolecule
• VueUiNestedDonuts
• VueUiOnion
• VueUiParallelCoordinatePlot
• VueUiQuadrant
• VueUiQuickChart
• VueUiRadar
• VueUiRelationCircle
• VueUiRidgeline
• VueUiRings
• VueUiScatter
• VueUiSparkStackbar
• VueUiSparkbar
• VueUiStackbar
• VueUiStripPlot
• VueUiTableSparkline
• VueUiThermometer
• VueUiTreemap
• VueUiVerticalBar
• VueUiWaffle
• VueUiWordCloud
• VueUiWorld
• VueUiXy
• VueUiXyCanvas

If the array of colors provided in customPalette is too small for the dataset, remaining colors will be computed from the default internal palette. Accepted color formats: HEX, RGB, HSL, named colors.

Responsive charts

By default, all charts will scale to the width of their container. However the folowing charts can be made fully responsive, making them better to use in resizable containers:

Component	Responsive feature implemented
VueUi3dBar	-
VueUiAgePyramid	✅
VueUiAgePyramid	✅
VueUiBullet	-
VueUiCarouselTable	-
VueUiChestnut	-
VueUiChord	✅
VueUiCirclePack	-
VueUiDonut	✅
VueUiDonutEvolution	-
VueUiDumbbell	✅
VueUiFlow	-
VueUiFunnel	✅
VueUiGalaxy	-
VueUiGauge	✅
VueUiHeatmap	-
VueUiHistoryPlot	✅
VueUiMolecule	-
VueUiMoodRadar	-
VueUiNestedDonuts	✅
VueUiOnion	✅
VueUiParallelCoordinatePlot	✅
VueUiQuadrant	✅
VueUiQuickChart	✅
VueUiRadar	✅
VueUiRelationCircle	✅
VueUiRidgeline	✅
VueUiRings	✅
VueUiScatter	✅
VueUiSparkHistogram	-
VueUiSparkStackbar	-
VueUiSparkTrend	-
VueUiSparkbar	-
VueUiSparkgauge	-
VueUiSparkline	✅
VueUiStackbar	✅
VueUiStripPlot	✅
VueUiTableHeatmap	-
VueUiTableSparkline	-
VueUiThermometer	-
VueUiTimer	✅
VueUiTiremarks	-
VueUiTreemap	✅
VueUiVerticalBar	✅
VueUiWaffle	✅
VueUiWheel	✅
VueUiWordCloud	✅
VueUiWorld	-
VueUiXy	✅
VueUiXyCanvas	✅

To activate responsiveness, set the config.responsive attribute to true:

1const config = ref({
2  responsive: true,
3  // rest of your config
4});

Important: when using the responsive feature, charts must be placed inside a container with fixed dimensions. Avoid setting a 100% height to this container, as it will result in the chart growing infinitely.

Big data optimization (since v2.4.11)

Very large datasets (> 5k or > 10k datapoints) will cause the browsers rendering engines to slow down, caused by too many SVG DOM elements to render. The following charts use the LTTB algorithm (Largest-Triangle-Three-Bucket) beyond a certain threshold to downsample the rendered dataset while preserving its shape. These components are the most susceptible to be used with very large datasets:

Component	Default Threshold	Remark
VueUiXy	500
VueUiXyCanvas	10000	Since this chart uses canvas, threhsold can be set higher
VueUiQuadrant	500
VueUiScatter	500
VueUiSparkline	500
VueUiSparkTrend	500

The downsample threshold for each component can be set in the config prop passed to components:

1const config = ref({
2  downsample: {
3    threshold: 500,
4  },
5  ...// rest of your config
6})

Chart custom background (since v2.4.59)

A #chart-background slot is available on most charts to customize their background, to display a gradient, an image, etc. The content placed inside this slot has pointer-events set to none, so it does not interfere with the components' interactivity.

1<VueUiXy :config="config" :dataset="dataset">
2  <template #chart-background>
3    <div
4      style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"
5    />
6  </template>
7</VueUiXy>

The following components do not support this slot, because it would not make sense:

• VueUiCarouselTable
• VueUiGizmo
• VueUiIcon
• VueUiKpi
• VueUiRating
• VueUiSmiley
• VueUiSparkStackbar
• VueUiSparkbar
• VueUiTableHeatmap
• VueUiTableSparkline
• VueUiTreemap
• VueUiWaffle
• VueUiXyCanvas

Pattern slot (v2.4.67+)

A #pattern slot is available on some components to apply custom patterns on datapoints for further customization. The slot exposes the seriesIndex, and a patternId which must be used on the pattern element to be recognized. A pattern element must be used inside this slot. It will be injected inside a defs element of the component.

1<VueUiDonut :config="config" :dataset="dataset">
2  <template #pattern="{ seriesIndex, patternId }">
3    <!-- Apply a patattern on the first datapoint only -->
4    <pattern
5      v-if="seriesIndex === 0"
6      :id="patternId"
7      viewBox="0,0,10,10"
8      width="10%"
9      height="10%"
10    >
11      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
12    </pattern>
13  </template>
14</VueUiDonut>

The #pattern slot is available on the following components:

• VueUiChord
• VueUiCirclePack
• VueUiDonut
• VueUiGauge
• VueUiRidgeline
• VueUiRings
• VueUiStackbar
• VueUiVerticalBar
• VueUiWaffle
• VueUiWorld
• VueUiXy

A set of 12 readymade patterns are available through the VueUiPattern component:

1import { VueUiPattern } from "vue-data-ui";

1<VueUiDonut :dataset="dataset" :config="config">
2  <template #pattern="{ seriesIndex, patternId }">
3    <VueUiPattern :id="patternId" name="bubbles" v-if="seriesIndex === 0" />
4    <VueUiPattern :id="patternId" name="squares" v-if="seriesIndex === 1" />
5  </template>
6</VueUiDonut>

VueUiPattern accepts the following props:

• id: string, required. Pass the patternId provided by the #pattern slot
• name: string, required. The name of the pattern to use
• fill: string, optional. The backgroundColor of the pattern. Transparent by default to show the datapoint base color
• stroke: string, optional. Default: #2D353C
• strokeWidth: number, optional. Default: 1
• scale: number, optional. Default: 1

List of available patterns:

pattern name
bubbles
flooring
grid
hexagon-diamond
hexagon-flooring
hexagon-grid
maze
redrum
scales
squares
wave
zigzag

Utility functions

A set of uility functions is available:

1import {
2  abbreviate,
3  darkenColor,
4  lightenColor,
5  shiftColorHue,
6  createTSpans,
7  getCumulativeAverage,
8  getCumulativeMedian,
9} from "vue-data-ui";

abreviate

1import { abbreviate } from "vue-data-ui";
2
3const text = "lorem ipsum dolor sit amet";
4const abbreviated = abbreviate({
5  source: text,
6  length: 5,
7}); // Result: LIDSA

darkenColor

1import { darkenColor } from "vue-data-ui";
2
3const color = "#FF0000";
4const darkened = darkenColor(color, 0.5); // Result: #800000ff

lightenColor

1import { lightenColor } from "vue-data-ui";
2
3const color = "#FF0000";
4const lightened = lightenColor(color, 0.5); // Result: #ff8080ff

shiftColorHue

1import { shiftColorHue } from "vue-data-ui";
2
3// Color format can be HEX (with or without alpha channel), RGB, RGBA, or named color
4const color = "#FF0000";
5const shifted = shiftColorHue(color, 0.1); // Result: #ff9900ff

createTSpans

1import { createTSpans } from "vue-data-ui";
2
3const textContent = createTSpans({
4  content: "This is an example of multiline text",
5  fontSize: 16,
6  fill: "#1A1A1A",
7  maxWords: 3,
8  x: 10,
9  y: 20,
10});

1<!-- The output must be used inside a svg text element with `v-html`, for example in a #data-label slot, or in your own svg -->
2
3<text
4  :x="10"
5  :y="20"
6  fill="#1A1A1A"
7  :font-size="16"
8  text-anchor="middle"
9  v-html="textContent"
10/>

getCumulativeAverage

1import { getCumulativeAverage } from "vue-data-ui";
2
3// simple usage
4const arr = [0, 1, 2, 3, 4];
5const cumulativeAvg = getCumulativeAverage({ values: arr });
6
7// Ignore invalid values entirely
8const arrWithInvalid = [1, null, 2, Infinity, NaN, undefined];
9const cumulativeAvgNoInvalid = getCumulativeAverage({
10  values: arrWithInvalid,
11  config: {
12    keepInvalid: false,
13  },
14});
15
16// Convert invalid values to zero
17const cumulativeAvgZeroed = getCumulativeAverage({
18  values: arrWithInvalid,
19  config: {
20    convertInvalidToZero: true,
21  },
22});

getCumulativeMedian

1import { getCumulativeMedian } from "vue-data-ui";
2
3// simple usage
4const arr = [0, 1, 2, 3, 4];
5const cumulativeMed = getCumulativeMedian({ values: arr });
6
7// Ignore invalid values entirely
8const arrWithInvalid = [1, null, 2, Infinity, NaN, undefined];
9const cumulativeMedNoInvalid = getCumulativeMedian({
10  values: arrWithInvalid,
11  config: {
12    keepInvalid: false,
13  },
14});
15
16// Convert invalid values to zero
17const cumulativeMedZeroed = getCumulativeMedian({
18  values: arrWithInvalid,
19  config: {
20    convertInvalidToZero: true,
21  },
22});

mergeConfigs

1import { mergeConfigs, getVueDataUiConfig } from "vue-data-ui";
2const defaultConfig = getVueDataUiConfig("vue_ui_xy");
3
4// Create a full config with user overrides
5const merged = mergeConfigs({
6  defaultConfig,
7  userConfig: {
8    chart: {
9      backgroundColor: "#FF0000",
10    },
11  },
12});

Multiline data labels

Some components will display labels on mutliple lines when the provided text contains a line break. (example: "I contain\na line break"). Below is a table of the places where such line breaks can be used:

Component	Label displayed	Where to use line breaks
VueUiXy	Time labels (x axis)	config.chart.grid.labels.xAxisLabels.values
VueUiDonutEvolution	Time labels (x axis)	config.style.chart.layout.grid.xAxis.dataLabels.values
VueUiHistoryPlot	Plot labels	dataset names
VueUiParallelCoordinatePlot	Axis labels	config.style.chart.yAxis.labels.axisNames
VueUiQuadrant	Plot labels	dataset names
VueUiQuickChart	Time labels (x axis)	config.xyPeriods
VueUiRidgeline	Time labels (x axis)	config.style.chart.xAxis.labels.values
VueUiStackbar	Time labels (x axis)	config.style.chart.grid.x.timeLabels.values
VueUiStripPlot	x axis labels	dataset names

PDF generation

This package requires jspdf as a peer dependency. Please install it in your project if you intend on using the PDF printing feature.