vue-data-ui

vue-data-ui

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

Interactive Documentation:

• Deployed Site - Vue Data UI
• GitHub Repo - vue-data-ui-doc

Available components

Charts

• VueUiAgePyramid
• VueUiBump
• VueUiCandlestick
• VueUiChestnut
• VueUiChord
• VueUiCirclePack
• VueUiDag
• VueUiDonutEvolution
• VueUiDonut
• VueUiDumbbell
• VueUiFlow
• VueUiFunnel
• VueUiGalaxy
• VueUiGauge
• VueUiGraph
• VueUiHeatmap
• VueUiHistoryPlot
• VueUiHorizontalBar
• VueUiMolecule
• VueUiMoodRadar
• VueUiNestedDonuts
• VueUiOnion
• VueUiParallelCoordinatePlot
• VueUiQuadrant
• VueUiQuickChart
• VueUiRadar
• VueUiRelationCircle
• VueUiRidgeline
• VueUiRings
• VueUiScatter
• VueUiStackbar
• VueUiStackline
• VueUiStripPlot
• VueUiThermometer
• VueUiTiremarks
• VueUiTreemap
• 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

• VueUiGeo
• VueUiWorld

Productivity

• VueUiHill

Utilities

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

Installation

pnpm add vue-data-ui

You can declare components globally in your main.js:

import { createApp } from 'vue';
import App from './App.vue';
// Include the css;
import 'vue-data-ui/style.css';

// You can declare Vue Data UI components globally
import { VueUiRadar } from 'vue-data-ui';

const app = createApp(App);

app.component('VueUiRadar', VueUiRadar);
app.mount('#app');

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

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

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.

<script setup>
import { ref } from "vue";
import { VueDataUi } from "vue-data-ui";
// Include the css;
import "vue-data-ui/style.css";

const config = ref({...});
const dataset = ref([...]);

</script>

<template>

  <VueDataUi
    component="VueUiXy"
    :config="config"
    :dataset="dataset"
  />

</template>

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.

Vue Data UI version2 -> version3 migration

Vue Data UI v3 does not contain breaking changes. However, some charts have their padding configs modified, which can lead to excessive padding with a v2 config.

Version 3 features

• config.loading (default: false) toggle loading state manually, to display a beautiful skeleton loader which uses the same chart component and shares layout features derived from your config. This skeleton loader is also triggered automatically if the provided dataset is undefined.

• config.debug (default: false) set to true to show warning messages during development, turn off for production.

• smart label resizing and auto-rotating features

• more charts support responsive mode

• config event callbacks

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:

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

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 the 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 custom SVG elements (shapes, text, etc.) above the chart content.

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

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

#svg-underlayer slot

Every component with a #svg slot also exposes #svg-underlayer for custom SVG content beneath the chart. Use it for background shapes, highlighted regions, or other decorations that should appear behind the data.

The underlayer exposes exactly the same slot props and uses the same coordinates as the component's #svg slot. Props vary by component; for example, VueUiXy exposes dimensions, drawingArea, data, slicer, and export flags inside svg. Both slots use the same TypeScript slot props type, such as VueUiXySvgSlotProps.

<VueUiXy :dataset="dataset" :config="config">
    <template #svg-underlayer="{ svg }">
        <rect
            :x="svg.drawingArea.left"
            :y="svg.drawingArea.top"
            :width="svg.drawingArea.width / 2"
            :height="svg.drawingArea.height"
            fill="chocolate"
            opacity="0.15"
            pointer-events="none"
        />
    </template>
</VueUiXy>

Underlayer content renders beneath the chart content, including the #chart-background slot. Opaque chart backgrounds can cover it.

The #svg-underlayer slot also works through the VueDataUi universal component when the wrapped component supports #svg.

#legend slot (since v.2.0.41)

All charts expose a #legend slot except for:

• VueUiCirclePack
• VueUiDumbbell
• VueUiFlow
• VueUiFunnel
• VueUiHeatmap
• VueUiHill
• 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.

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

Legend toggle

An opt-in config option displays a toggle button to hide/show all series, when the number of series > 2. This attribute can be found in the legend.selectAllToggle config section:

legend: {
  selectAllToggle: {
    show: false,
    backgroundColor: '#E1E5E8',
    color: '#2D353C'
  }
}

This legend toggle option is available for the following components:

• VueUiDonut
• VueUiDonutEvolution
• VueUiGalaxy
• VueUiHistoryPlot
• VueUiHorizontalBar
• VueUiNestedDonuts
• VueUiOnion
• VueUiParallelCoordinatePlot
• VueUiQuadrant
• VueUiQuickChart
• VueUiRadar
• VueUiRidgeline
• VueUiRings
• VueUiRings
• VueUiScatter
• VueUiSparkStackbar
• VueUiStackbar
• VueUiStackline
• VueUiTreemap
• VueUiWaffle
• VueUiWorld
• VueUiXy
• VueUiXyCanvas

Tooltip slots

Use the #tooltip slot to customize tooltip contents. You will usually only need the datapoint attribute exposed by the slot, but you can always log what the slot provides if you need more.

<VueUiXy :dataset :config>
    <template #tooltip="{ ...tooltip }">
        <div>
            <span>{{ tooltip.timeLabel.text }}</span>
            <div v-for="serie in tooltip.datapoint" :key="serie.id">
                {{ serie.name }}: {{ serie.value }}
            </div>
        </div>
    </template>
</VueUiXy>

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

All slots expose the following object:

{
  datapoint,
  seriesIndex,
  series,
  config,
}

Components with time series will also expose an additional timeLabel attribute.

The following charts bear these slots:

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

* VueUiXy slots specifically expose the following additional attributes:

{
  ...,
  bars,
  lines,
  plots
}

<VueUiDonut :config="config" :dataset="dataset">
  <template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
    <div>
      This content shows first
    </div>
  </template>
  <template #tooltip-after={ datapoint, seriesIndex, dataset, config }">
    <div>
      This content shows the last
    </div>
  </template>
</VueUiDonut>

The #tooltip-before & #tooltip-after slots also work 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.

<VueUiDonut :config="config" :dataset="dataset">
    <template #watermark="{ isPrinting }">
        <div
            v-if="isPrinting"
            style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)"
        >
            WATERMARK
        </div>
    </template>
</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.

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

Config

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

import { getVueDataUiConfig } from 'vue-data-ui';

const 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.

9 themes are available for all charts:

• default (or '')
• dark
• zen
• hack
• concrete
• celebration
• celebrationNight
• minimal
• minimalDark

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:

const donutConfig = ref({
  theme: 'zen',
  ...
})

Quick custom theme

You can quickly setup your own theme for a given chart:

import { getVueDataUiConfig, mergeConfigs } from 'vue-data-ui';

// Get the default config and set color options
const customTheme = getVueDataUiConfig('vue_ui_xy', {
    colorBackground: '#1A1A1A',
    colorTextPrimary: '#CD9077',
    colorTextSecondary: '#825848',
    colorGrid: '#CD9077',
    colorBorder: '#CD9077',
});

const config = computed(() => {
    // Use the `mergeConfigs` utility to set additional configurations while preserving your theme
    return mergeConfigs({
        defaultConfig: customTheme,
        userConfig: {
            chart: {
                title: {
                    text: 'Title',
                    subtitle: {
                        text: 'Subtitle',
                    },
                },
            },
        },
    });
});

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	@zoomStart, @zoomEnd, @zoomReset, @copyAlt, @selectDatapoint, @selectLegend, generatePdf, generateImage, toggleTooltip	#legend, #tooltip, #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, @hoverIndex, @zoom, @zoomReset	#svg, #svg-underlayer, #before, #chart-background, #tooltip, #hint	✅	✅
VueUiSparkbar	VueUiSparkbarDatasetItem[]	VueUiSparkbarConfig	@selectDatapoint	#data-label, #title	❌	✅
VueUiSparkStackbar	VueUiSparkStackbarDatasetItem[]	VueUiSparkStackbarConfig	@selectDatapoint, @selectLegend	#tooltip, #tooltip-before, #tooltip-after, #hint	✅	✅
VueUiSparkHistogram	VueUiSparkHistogramDatasetItem[]	VueUiSparkHistogramConfig	@selectDatapoint	#chart-background, #hint	❌	✅
VueUiSparkGauge	VueUiSparkGaugeDataset	VueUiSparkGaugeConfig	❌	#chart-background	❌	✅
VueUiSparkTrend	number[]	VueUiSparkTrendConfig	❌	#chart-background	❌	✅
VueUiGizmo	VueUiGizmoDataset	VueUiGizmoConfig	❌	❌	❌	❌
VueUiBullet	VueUiBulletDataset	VueUiBulletConfig	generatePdf, generateImg, getData, getImage	#svg, #svg-underlayer, #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, getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #hint	✅	✅
VueUiBump	VueUiBumpDatapointItem[]	VueUiBumpConfig	generatePdf, generateImage, generateCsv, toggleTable, getData, getImage	#svg, #svg-underlayer, #watermark, #chart-background, #time-label, #hint	❌	✅
VueUiCandlestick	Array<Array<string / number>>	VueUiCandlestickConfig	@selectX, @zoomStart, @zoomEnd, @zoomReset, @copyAlt, generatePdf, generateImage, generateCsv, toggleTable, toggleTooltip, getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background, #hint	✅	✅
VueUiChestnut	VueUiChestnutDatasetRoot[]	VueUiChestnutConfig	@selectRoot, @selectBranch, @selectNut, getData, generatePdf, generateCsv, generateImage, toggleTable, getImage	#svg, #svg-underlayer, #legend, #watermark, #chart-background, #hint, #hint	❌	✅
VueUiChord	VueUiChordDataset	VueUiChordConfig	@selectLegend, @selectGroup, @selectRibbon, getData, generatePdf, generateCsv, generateImage, toggleTable, getImage	#svg, #svg-underlayer, #legend, #watermark, #chart-background, #pattern, #hint	❌	✅
VueUiCirclePack	VueUiCirclePackDatasetItem[]	VueUiCirclePackConfig	@selectDatapoint, getData, generatePdf, generateImage, generateCsv, toggleTable, getImage	#svg, #svg-underlayer, #legend, #watermark, #chart-background , #pattern, #zoom-label, #data-label, #tooltip-before, #tooltip-after, #hint	✅	✅
VueUiDag	VueUiDagDataset	VueUiDagConfig	@onNodeClick, @onMidpointEnter, @onMidpointLeave, focusOnNode, getData, getImage, generatePdf, generateImage, generateSvg, toggleAnnotator, toggleFullscreen, zoomIn, zoomOut, resetZoom, switchDirection	#svg, #svg-underlayer, #source, #node-label, #node, #tooltip-midpoint, #tooltip-node, #background-pattern, #hint	❌	✅
VueUiDonutEvolution	VueUiDonutEvolutionDatasetItem[]	VueUiDonutEvolutionConfig	@zoomStart, @zoomEnd, @zoomReset, @copyAlt, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable , getImage	#svg, #svg-underlayer, #legend, #reset-action, #watermark, #chart-background, #hint	❌	✅
VueUiDonut	VueUiDonutDatasetItem[]	VueUiDonutConfig	@selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage	#svg, #svg-underlayer, #legend, #dataLabel, #tooltip, #tooltip-before, #tooltip-after, #plot-comment, #watermark, #chart-background, #pattern, #hint	✅	✅
VueUiDumbbell	VueUiDumbbellDataset[]	VueUiDumbbellConfig	getData, generatePdf, generateCsv, generateImage, toggleTable, getImage	#svg, #svg-underlayer, #legend, #watermark, #chart-background, #hint	❌	✅
VueUiFlow	VueUiFlowDatasetItem[]	VueUiFlowConfig	getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage	#svg, #svg-underlayer, #legend, #watermark, #chart-background, #tooltip, #tooltip-before, #tooltip-after, #hint	✅	✅
VueUiFunnel	VueUiFunnelDatasetItem[]	VueUiFunnelConfig	getData, generatePdf, generateCsv, generateImage, toggleTable, getImage	#svg, #svg-underlayer, #watermark, #chart-background, #hint	❌	✅
VueUiGalaxy	VueUiGalaxyDatasetItem[]	VueUiGalaxyConfig	@selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage	#svg, #svg-underlayer, #legend,#tooltip, #tooltip-before, #tooltip-after, #chart-background, #hint	✅	✅
VueUiGauge	VueUiGaugeDataset	VueUiGaugeConfig	generatePdf, generateImage, getImage	#svg, #svg-underlayer, #legend, #watermark, #chart-background, #pattern	❌	✅
VueUiGraph	VueUiGraphDataset	VueUiGraphConfig	@selectNode, @hoverNode, @zoom, @zoomReset, @layoutStart, @layoutEnd, @copyAlt, zoomIn, zoomOut, resetZoom, fitToView, focusNode, resetLayout, getData, getImage, generatePdf, generateImage, generateSvg, generateCsv, toggleTable, toggleTooltip, toggleFullscreen, toggleZoom, toggleAnnotator, copyAlt	#node, #svg, #svg-underlayer, #chart-background, #watermark, #tooltip, #tooltip-before, #tooltip-after, #hint, #source, #skeleton	✅	✅
VueUiHeatmap	VueUiHeatmapDatasetItem[]	VueUiHeatmapConfig	@selectDatapoint, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage	#svg, #svg-underlayer, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #hint	✅	✅
VueUiHistoryPlot	VueUiHistoryPlotDatasetItem[]	VueUiHistoryPlotConfig	@selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #hint	✅	✅
VueUiHorizontalBar	VueUiHorizontalBarDatasetItem[]	VueUiWheelConfig	@selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleSort, toggleTooltip , getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #pattern, #hint	✅	✅
VueUiMolecule	VueUiMoleculeDatasetNode[]	VueUiMoleculeConfig	@selectNode, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage	#node, #svg, #svg-underlayer, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background	✅	✅
VueUiMoodRadar	VueUiMoodRadarDataset	VueUiMoodRadarConfig	getData, generatePdf, generateCsv, generateImage, toggleTable , getImage	#svg, #svg-underlayer, #legend, #watermark, #chart-background, #hint	❌	✅
VueUiNestedDonuts	VueUiNestedDonutsDatasetItem[]	VueUiNestedDonutsConfig	@selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #hint	✅	✅
VueUiOnion	VueUiOnionDatasetItem[]	VueUiOnionConfig	@selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #hint	✅	✅
VueUiParallelCoordinatePlot	VueUiParallelCoordinatePlotDatasetItem[]	VueUiParallelCoordinatePlotConfig	@selectLegend, @selectDatapoint, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #plot-comment, #watermark, #chart-background, #hint	✅	✅
VueUiQuadrant	VueUiQuadrantDatasetItem[]	VueUiQuadrantConfig	@selectLegend, @selectPlot, @selectSide, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #datapoint, #hint	✅	✅
VueUiRadar	VueUiRadarDataset	VueUiRadarConfig	@selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #hint	✅	✅
VueUiRidgeline	VueUiRidgelineDatasetItem[]	VueUiRidgelineConfig	@selectLegend, @selectX, @selectDatapoint, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable , getImage	#svg, #svg-underlayer, #legend, #time-label,#watermark, #chart-background, #pattern, #hint	❌	✅
VueUiRings	VueUiRingsDatasetItem[]	VueUiRingsConfig	@selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , toggleLabels, getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #pattern, #hint	✅	✅
VueUiScatter	VueUiScatterDatasetItem[]	VueUiScatterConfig	hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #hint	✅	✅
VueUiStackbar	VueUiStackbarDatasetItem[]	VueUiStackbarConfig	@selectX, @zoomStart, @zoomEnd, @zoomReset, @copyAlt, @selectLegend, @selectDatapoint, @selectTimeLabel, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage	#svg, #svg-underlayer, #legend, #time-label, #tooltip, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background, #pattern, #hint	✅	✅
VueUiStackline	VueUiStacklineDatasetItem[]	VueUiStacklineConfig	@selectX, @zoomStart, @zoomEnd, @zoomReset, @copyAlt, @selectLegend, @selectDatapoint, @selectTimeLabel, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage	#svg, #svg-underlayer, #legend, #time-label, #tooltip, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background, #pattern, #hint	✅	✅
VueUiStripPlot	VueUiStripPlotDataset[]	VueUiStripPlotConfig	@selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #chart-background, #hint	✅	✅
VueUiThermometer	VueUiThermometerDataset	VueUiThermometerConfig	generatePdf, generateImage , getImage	#svg, #svg-underlayer, #watermark, #chart-background	❌	✅
VueUiTiremarks	VueUiTiremarksDataset	VueUiTiremarksConfig	generatePdf, generateImage , getImage	#svg, #svg-underlayer, #legend, #watermark, #chart-background	❌	✅
VueUiTreemap	VueUiTreemapDatasetItem[]	VueUiTreemapConfig	@selectLegend, @selectDatapoint, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage, #hint	#svg, #svg-underlayer, #rect, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #breadcrumb-label, #breadcrumb-arrow, #group-label	✅	✅
VueUiWaffle	VueUiWaffleDatasetItem[]	VueUiWaffleConfig	@selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage, #hint	#svg, #svg-underlayer, #legend, #tooltip, #tooltip-before, #tooltip-after, #watermark, #pattern	✅	✅
VueUiWheel	VueUiWheelDataset	VueUiWheelConfig	generatePdf, generateImage , getImage	#svg, #svg-underlayer, #watermark, #chart-background	❌	✅
VueUiWordCloud	VueUiWordCloudDatasetItem[] / string	VueUiWordCloudConfig	getData, generatePdf, generateImage, generateCsv, toggleTooltip , getImage, #hint	#svg, #svg-underlayer, #reset-action, #watermark, #tooltip, #tooltip-before, #tooltip-after, #chart-background	✅	✅
VueUiXyCanvas	VueUiXyCanvasDatasetItem[]	VueUiXyCanvasConfig	@selectX, @zoomStart, @zoomEnd, @zoomReset, @copyAlt, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip , getImage, #hint	#legend, #tooltip, #tooltip-before, #tooltip-after, #reset-action, #watermark	✅	✅
VueUiXy	VueUiXyDatasetItem[]	VueUiXyConfig	@selectLegend, @selectX, @selectTimeLabel, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip , getImage, #hint	#svg, #svg-underlayer, #legend, #time-label, #tooltip, #tooltip-before, #tooltip-after, #reset-action, #plot-comment,#watermark, #chart-background, #pattern, #area-gradient, #bar-gradient	✅	✅

3D charts

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

Maps

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
VueUiGeo	VueUiGeoDatasetItem[]	VueUiGeoConfig	generatePdf, generateImage, toggleTooltip, toggleAnnotator, getImage, zoomIn, zoomOut, resetZoom, focusLocation, #hint	#svg, #svg-underlayer, #watermark, #pattern, #chart-background, #datapoint	✅	✅
VueUiWorld	VueUiWorldDataset	VueUiWorldConfig	getData, generatePdf, generateImage, toggleTable, toggleTooltip, toggleAnnotator, getImage	#svg, #svg-underlayer, #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

Productivity

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
VueUiHill	VueUiHillDatasetItem	VueUiHillConfig	edit, save, cancel, copyAlt, dragStart, dragEnd, datapointEnter, datapointLeave, selectDatapoint, generatePdf, generateImage, getImage	#svg, #svg-underlayer, #analysis, #loading, #watermark, #chart-background, #hill-edit, #hill-cancel, #hill-save	❌	✅

Utilities

Name	dataset type	config type	emits / exposed methods	slots
VueUiAccordion	❌	VueUiAccordionConfig	❌	#arrow, #title, #content
VueUiAnnotator	VueUiAnnotatorDataset	VueUiAnnotatorConfig	@toggleOpenState, @saveAnnotations	#toggle, #icon-move, #icon-resize, #icon-delete, #icon-select-group, #icon-bring-to-front, #icon-bring-to-back, #icon-copy, #icon-undo, #icon-redo, #icon-print, #icon-export-image, #icon-save, #icon-circle, #icon-rect, #icon-arrow, #icon-freehand, #icon-text, #icon-text-align-left, #icon-text-align-center, #icon-text-align-right, #icon-text-bullet-points, #icon-text-bold, #icon-text-bold, #icon-text-italic, #icon-text-underline, #icon-color
VueUiCursor	❌	VueUiCursorConfig	❌	❌