# vue-data-ui [![Version](https://npmx.dev/api/registry/badge/version/vue-data-ui)](https://npmx.dev/vue-data-ui) [![License](https://npmx.dev/api/registry/badge/license/vue-data-ui)](https://npmx.dev/package/vue-data-ui) [![Types](https://npmx.dev/api/registry/badge/types/vue-data-ui)](https://npmx.dev/package/vue-data-ui) [![npm downloads](https://npmx.dev/api/registry/badge/downloads/vue-data-ui)](https://npmx.dev/package/vue-data-ui?modal=chart) [![Static Badge](https://npmx.dev/api/registry/badge/version/nuxt?color=22c55e&value=69&label=components)](https://vue-data-ui.graphieros.com) [![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)](https://github.com/graphieros/vue-data-ui/issues) [![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4526-shield.svg)](https://madewithvuejs.com/p/vue-data-ui/shield-link) [![GitHub Repo stars](https://img.shields.io/github/stars/graphieros/vue-data-ui)](https://github.com/graphieros/vue-data-ui) A user-empowering data visualization Vue component library for eloquent data storytelling. Interactive Documentation: - Deployed Site - [Vue Data UI](https://vue-data-ui.graphieros.com/) - GitHub Repo - [vue-data-ui-doc](https://github.com/graphieros/vue-data-ui-doc) Available components ## Charts - [VueUiAgePyramid](https://vue-data-ui.graphieros.com/docs#vue-ui-age-pyramid) - [VueUiBump](https://vue-data-ui.graphieros.com/docs#vue-ui-bump) - [VueUiCandlestick](https://vue-data-ui.graphieros.com/docs#vue-ui-candlestick) - [VueUiChestnut](https://vue-data-ui.graphieros.com/docs#vue-ui-chestnut) - [VueUiChord](https://vue-data-ui.graphieros.com/docs#vue-ui-chord) - [VueUiCirclePack](https://vue-data-ui.graphieros.com/docs#vue-ui-circle-pack) - [VueUiDag](https://vue-data-ui.graphieros.com/docs#vue-ui-dag) - [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution) - [VueUiDonut](https://vue-data-ui.graphieros.com/docs#vue-ui-donut) - [VueUiDumbbell](https://vue-data-ui.graphieros.com/docs#vue-ui-dumbbell) - [VueUiFlow](https://vue-data-ui.graphieros.com/docs#vue-ui-flow) - [VueUiFunnel](https://vue-data-ui.graphieros.com/docs#vue-ui-funnel) - [VueUiGalaxy](https://vue-data-ui.graphieros.com/docs#vue-ui-galaxy) - [VueUiGauge](https://vue-data-ui.graphieros.com/docs#vue-ui-gauge) - [VueUiHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-heatmap) - [VueUiHistoryPlot](https://vue-data-ui.graphieros.com/docs#vue-ui-history-plot) - [VueUiHorizontalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-horizontal-bar) - [VueUiMolecule](https://vue-data-ui.graphieros.com/docs#vue-ui-molecule) - [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar) - [VueUiNestedDonuts](https://vue-data-ui.graphieros.com/docs#vue-ui-nested-donuts) - [VueUiOnion](https://vue-data-ui.graphieros.com/docs#vue-ui-onion) - [VueUiParallelCoordinatePlot](https://vue-data-ui.graphieros.com/docs#vue-ui-parallel-coordinate-plot) - [VueUiQuadrant](https://vue-data-ui.graphieros.com/docs#vue-ui-quadrant) - [VueUiQuickChart](https://vue-data-ui.graphieros.com/docs#vue-ui-quick-chart) - [VueUiRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-radar) - [VueUiRelationCircle](https://vue-data-ui.graphieros.com/docs#vue-ui-relation-circle) - [VueUiRidgeline](https://vue-data-ui.graphieros.com/docs#vue-ui-ridgeline) - [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings) - [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter) - [VueUiStackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-stackbar) - [VueUiStackline](https://vue-data-ui.graphieros.com/docs#vue-ui-stackline) - [VueUiStripPlot](https://vue-data-ui.graphieros.com/docs#vue-ui-strip-plot) - [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer) - [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks) - [VueUiTreemap](https://vue-data-ui.graphieros.com/docs#vue-ui-treemap) - [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle) - [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel) - [VueUiWordCloud](https://vue-data-ui.graphieros.com/docs#vue-ui-word-cloud) - [VueUiXyCanvas](https://vue-data-ui.graphieros.com/docs#vue-ui-xy-canvas) - [VueUiXy](https://vue-data-ui.graphieros.com/docs#vue-ui-xy) ## Mini charts - [VueUiSparkHistogram](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkhistogram) - [VueUiSparkbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkbar) - [VueUiSparkgauge](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkgauge) - [VueUiSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkline) - [VueUiSparkStackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkstackbar) - [VueUiSparkTrend](https://vue-data-ui.graphieros.com/docs#vue-ui-spark-trend) - [VueUiGizmo](https://vue-data-ui.graphieros.com/docs#vue-ui-gizmo) - [VueUiBullet](https://vue-data-ui.graphieros.com/docs#vue-ui-bullet) ## 3d - [VueUi3dBar](https://vue-data-ui.graphieros.com/docs#vue-ui-3d-bar) ## Tables - [VueUiTableHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-table-heatmap) - [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline) - [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table) - [VueUiCarouselTable](https://vue-data-ui.graphieros.com/docs#vue-ui-carousel-table) ## Rating - [VueUiRating](https://vue-data-ui.graphieros.com/docs#vue-ui-rating) - [VueUiSmiley](https://vue-data-ui.graphieros.com/docs#vue-ui-smiley) ## Maps - [VueUiGeo](https://vue-data-ui.graphieros.com/docs#vue-ui-geo) - [VueUiWorld](https://vue-data-ui.graphieros.com/docs#vue-ui-world) ## Productivity - [VueUiHill](https://vue-data-ui.graphieros.com/docs#vue-ui-hill) ## Utilities - [VueUiAccordion](https://vue-data-ui.graphieros.com/docs#vue-ui-accordion) - [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator) - [VueUiCursor](https://vue-data-ui.graphieros.com/docs#vue-ui-cursor) - [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard) - [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits) - [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon) - [VueUiKpi](https://vue-data-ui.graphieros.com/docs#vue-ui-kpi) - [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader) - [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton) - [VueUiTimer](https://vue-data-ui.graphieros.com/docs#vue-ui-timer) # Installation ``` npm i vue-data-ui ``` You can declare components globally in your main.js: ```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: ```js ``` 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. ```js ``` 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](https://github.com/graphieros/vue-data-ui-nuxt) # Customizable tooltips Charts with tooltips have a config option to customize tooltip contents: ```js customFormat: ({ seriesIndex, datapoint, series, config }) => { return `

${ ... }

`; } ``` # 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 customized svg elements (shapes, text, etc). ```html ``` 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 - 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. ```html ``` ## 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: ```js 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. ```html ``` 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 - 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 } ``` ```html ``` 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. ```html ``` ## 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. ```html ``` # Config If for some reason you can't access the documentation website and need to get the default config object for a component: ```js 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: ```js const donutConfig = ref({ theme: 'zen', ... }) ``` # Quick custom theme You can quickly setup your own theme for a given chart: ```js 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`, `#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`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ | ### Charts | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes | | ----------------------------- | ------------------------------------------ | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | | `VueUiAgePyramid` | `Array>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ | | `VueUiBump` | `VueUiBumpDatapointItem[]` | `VueUiBumpConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `getData`, `getImage` | `#svg`, `#watermark`, `#chart-background`, `#time-label`, `#hint` | ❌ | ✅ | | `VueUiCandlestick` | `Array>` | `VueUiCandlestickConfig` | `@selectX`, `@zoomStart`, `@zoomEnd`, `@zoomReset`, `@copyAlt`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#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`, `#legend`, `#watermark`, `#chart-background`, `#hint`, `#hint` | ❌ | ✅ | | `VueUiChord` | `VueUiChordDataset` | `VueUiChordConfig` | `@selectLegend`, `@selectGroup`, `@selectRibbon`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern`, `#hint` | ❌ | ✅ | | `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `getImage` | `#svg`, `#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`, `#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`, `#legend`, `#reset-action`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ | | `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern`, `#hint` | ✅ | ✅ | | `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ | | `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#hint` | ✅ | ✅ | | `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ | | `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`,`#tooltip`, `#tooltip-before`, `#tooltip-after`, `#chart-background`, `#hint` | ✅ | ✅ | | `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ | | `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `@selectDatapoint`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ | | `VueUiHistoryPlot` | `VueUiHistoryPlotDatasetItem[]` | `VueUiHistoryPlotConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#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`, `#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`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ | | `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ | | `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ | | `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#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`, `#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`, `#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`, `#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`, `#legend`, `#time-label`,`#watermark`, `#chart-background`, `#pattern`, `#hint` | ❌ | ✅ | | `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `toggleLabels`, `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern`, `#hint` | ✅ | ✅ | | `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#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`, `#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`, `#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`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ | | `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ | | `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ | | `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage`, `#hint` | `#svg`, `#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`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ | | `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ | | `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` , `getImage`, `#hint` | `#svg`, `#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`, `#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`, `#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`, `#watermark`, `#pattern`, `#chart-background`, `#datapoint` | ✅ | ✅ | | `VueUiWorld` | `VueUiWorldDataset` | `VueUiWorldConfig` | `getData`, `generatePdf`, `generateImage`, `toggleTable`, `toggleTooltip`, `toggleAnnotator`, `getImage` | `#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` | | ### 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`, `#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` | ❌ | ❌ | | `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | `#content`, `#top`, `#bottom` | | `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ | | `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` | | `VueUiLabel` | `VueUiLabelDataset` | `VueUiLabelConfig` | `@dragStart`, `@drag`, `@dragEnd`, `@mouseenter`, `@mouseleave`, `@click`, `@focus`, `@blur`, `reorder` | `#before`, `#after`, `#title`, `#content` | | `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ | | `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ | | `VueUiTimer` | ❌ | `VueUiTimerConfig` | `@start`, `@pause`, `@reset`, `@restart`, `@lap` | `#time`, `#controls`, `#laps`, `#chart-background` | | `VueUiIcon` | see below | - | - | `#exp`, `#sub` | ### Icons Tailor made icons are available through the VueUiIcon component: ```html ``` All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type. `VueUiIcon` props: | Name | type | Default value | | -------------- | ---------------- | ------------- | | `name` | `VueUiIconName` | `undefined` | | `size` | `number` | `24` | | `stroke` | `string` (color) | `'#CCCCCC'` | | `strokeWidth` | `number` | `1.5` | | `isSpin` | `boolean` | `false` | | `spinDuration` | `string` | `'1s'` | Icons have 2 slots that can be used to display exp or sub icons: ```html