{"id":13359324,"url":"https://github.com/graphieros/vue-data-ui","last_synced_at":"2026-04-02T14:01:21.223Z","repository":{"id":184130517,"uuid":"670239797","full_name":"graphieros/vue-data-ui","owner":"graphieros","description":"An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling","archived":false,"fork":false,"pushed_at":"2026-03-28T10:20:31.000Z","size":22157,"stargazers_count":2262,"open_issues_count":0,"forks_count":121,"subscribers_count":9,"default_branch":"master","last_synced_at":"2026-03-28T11:49:59.683Z","etag":null,"topics":["charts","components-library","dashboard","data-storytelling","data-visualization","donut","gauge","heatmap","quadrant","radar","rating-stars","scatter","screenshot","skeleton-loader","sparkline","table","vue-data-ui","vue3","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"https://vue-data-ui.graphieros.com/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graphieros.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"graphieros","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2023-07-24T15:43:07.000Z","updated_at":"2026-03-28T10:05:46.000Z","dependencies_parsed_at":"2026-01-03T05:04:09.750Z","dependency_job_id":null,"html_url":"https://github.com/graphieros/vue-data-ui","commit_stats":{"total_commits":206,"total_committers":2,"mean_commits":103.0,"dds":"0.014563106796116498","last_synced_commit":"584e9de4381e38644a7c0317a2c9cd6fe3560e0d"},"previous_names":["graphieros/vue-data-ui"],"tags_count":728,"template":false,"template_full_name":null,"purl":"pkg:github/graphieros/vue-data-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fvue-data-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fvue-data-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fvue-data-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fvue-data-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/vue-data-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fvue-data-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31307459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","components-library","dashboard","data-storytelling","data-visualization","donut","gauge","heatmap","quadrant","radar","rating-stars","scatter","screenshot","skeleton-loader","sparkline","table","vue-data-ui","vue3","vuejs","vuejs3"],"created_at":"2024-07-29T21:04:32.653Z","updated_at":"2026-04-02T14:01:21.208Z","avatar_url":"https://github.com/graphieros.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n \u003ca href=\"https://vue-data-ui.graphieros.com/\"\u003e\u003cimg width=\"500\" src=\"https://github.com/user-attachments/assets/19d4334d-679c-4c19-bc4f-6050810afa05\"\u003e\u003c/a\u003e\n \u003cbr\u003e\n \u003ca href=\"https://vue-data-ui.graphieros.com/\"\u003e\u003cimg width=\"100%\" src=\"https://github.com/user-attachments/assets/0474eb0e-0918-43e1-9756-30a5a8052d82\"\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\n# vue-data-ui\n\n[![Version](https://npmx.dev/api/registry/badge/version/vue-data-ui)](https://npmx.dev/vue-data-ui)\n[![License](https://npmx.dev/api/registry/badge/license/vue-data-ui)](https://npmx.dev/package/vue-data-ui)\n[![Types](https://npmx.dev/api/registry/badge/types/vue-data-ui)](https://npmx.dev/package/vue-data-ui)\n[![npm downloads](https://npmx.dev/api/registry/badge/downloads/vue-data-ui)](https://npmx.dev/package/vue-data-ui?modal=chart)\n[![Static Badge](https://img.shields.io/badge/components-67-blue)](https://github.com/graphieros/vue-data-ui)\n[![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)](https://github.com/graphieros/vue-data-ui/issues)\n[![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4526-shield.svg)](https://madewithvuejs.com/p/vue-data-ui/shield-link)\n[![GitHub Repo stars](https://img.shields.io/github/stars/graphieros/vue-data-ui)](https://github.com/graphieros/vue-data-ui)\n\nA user-empowering data visualization Vue component library for eloquent data storytelling.\n\nInteractive Documentation:\n\n- Deployed Site - [Vue Data UI](https://vue-data-ui.graphieros.com/)\n- GitHub Repo - [vue-data-ui-doc](https://github.com/graphieros/vue-data-ui-doc)\n\nAvailable components\n\n## Charts\n\n- [VueUiAgePyramid](https://vue-data-ui.graphieros.com/docs#vue-ui-age-pyramid)\n- [VueUiBump](https://vue-data-ui.graphieros.com/docs#vue-ui-bump)\n- [VueUiCandlestick](https://vue-data-ui.graphieros.com/docs#vue-ui-candlestick)\n- [VueUiChestnut](https://vue-data-ui.graphieros.com/docs#vue-ui-chestnut)\n- [VueUiChord](https://vue-data-ui.graphieros.com/docs#vue-ui-chord)\n- [VueUiCirclePack](https://vue-data-ui.graphieros.com/docs#vue-ui-circle-pack)\n- [VueUiDag](https://vue-data-ui.graphieros.com/docs#vue-ui-dag)\n- [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)\n- [VueUiDonut](https://vue-data-ui.graphieros.com/docs#vue-ui-donut)\n- [VueUiDumbbell](https://vue-data-ui.graphieros.com/docs#vue-ui-dumbbell)\n- [VueUiFlow](https://vue-data-ui.graphieros.com/docs#vue-ui-flow)\n- [VueUiFunnel](https://vue-data-ui.graphieros.com/docs#vue-ui-funnel)\n- [VueUiGalaxy](https://vue-data-ui.graphieros.com/docs#vue-ui-galaxy)\n- [VueUiGauge](https://vue-data-ui.graphieros.com/docs#vue-ui-gauge)\n- [VueUiHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-heatmap)\n- [VueUiHistoryPlot](https://vue-data-ui.graphieros.com/docs#vue-ui-history-plot)\n- [VueUiHorizontalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-horizontal-bar)\n- [VueUiMolecule](https://vue-data-ui.graphieros.com/docs#vue-ui-molecule)\n- [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar)\n- [VueUiNestedDonuts](https://vue-data-ui.graphieros.com/docs#vue-ui-nested-donuts)\n- [VueUiOnion](https://vue-data-ui.graphieros.com/docs#vue-ui-onion)\n- [VueUiParallelCoordinatePlot](https://vue-data-ui.graphieros.com/docs#vue-ui-parallel-coordinate-plot)\n- [VueUiQuadrant](https://vue-data-ui.graphieros.com/docs#vue-ui-quadrant)\n- [VueUiQuickChart](https://vue-data-ui.graphieros.com/docs#vue-ui-quick-chart)\n- [VueUiRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-radar)\n- [VueUiRelationCircle](https://vue-data-ui.graphieros.com/docs#vue-ui-relation-circle)\n- [VueUiRidgeline](https://vue-data-ui.graphieros.com/docs#vue-ui-ridgeline)\n- [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings)\n- [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter)\n- [VueUiStackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-stackbar)\n- [VueUiStackline](https://vue-data-ui.graphieros.com/docs#vue-ui-stackline)\n- [VueUiStripPlot](https://vue-data-ui.graphieros.com/docs#vue-ui-strip-plot)\n- [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)\n- [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)\n- [VueUiTreemap](https://vue-data-ui.graphieros.com/docs#vue-ui-treemap)\n- [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)\n- [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)\n- [VueUiWordCloud](https://vue-data-ui.graphieros.com/docs#vue-ui-word-cloud)\n- [VueUiXyCanvas](https://vue-data-ui.graphieros.com/docs#vue-ui-xy-canvas)\n- [VueUiXy](https://vue-data-ui.graphieros.com/docs#vue-ui-xy)\n\n## Mini charts\n\n- [VueUiSparkHistogram](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkhistogram)\n- [VueUiSparkbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkbar)\n- [VueUiSparkgauge](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkgauge)\n- [VueUiSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkline)\n- [VueUiSparkStackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkstackbar)\n- [VueUiSparkTrend](https://vue-data-ui.graphieros.com/docs#vue-ui-spark-trend)\n- [VueUiGizmo](https://vue-data-ui.graphieros.com/docs#vue-ui-gizmo)\n- [VueUiBullet](https://vue-data-ui.graphieros.com/docs#vue-ui-bullet)\n\n## 3d\n\n- [VueUi3dBar](https://vue-data-ui.graphieros.com/docs#vue-ui-3d-bar)\n\n## Tables\n\n- [VueUiTableHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-table-heatmap)\n- [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline)\n- [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table)\n- [VueUiCarouselTable](https://vue-data-ui.graphieros.com/docs#vue-ui-carousel-table)\n\n## Rating\n\n- [VueUiRating](https://vue-data-ui.graphieros.com/docs#vue-ui-rating)\n- [VueUiSmiley](https://vue-data-ui.graphieros.com/docs#vue-ui-smiley)\n\n## Maps\n\n- [VueUiGeo](https://vue-data-ui.graphieros.com/docs#vue-ui-geo)\n- [VueUiWorld](https://vue-data-ui.graphieros.com/docs#vue-ui-world)\n\n## Utilities\n\n- [VueUiAccordion](https://vue-data-ui.graphieros.com/docs#vue-ui-accordion)\n- [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)\n- [VueUiCursor](https://vue-data-ui.graphieros.com/docs#vue-ui-cursor)\n- [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)\n- [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits)\n- [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)\n- [VueUiKpi](https://vue-data-ui.graphieros.com/docs#vue-ui-kpi)\n- [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader)\n- [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton)\n- [VueUiTimer](https://vue-data-ui.graphieros.com/docs#vue-ui-timer)\n\n# Installation\n\n```\nnpm i vue-data-ui\n```\n\nYou can declare components globally in your main.js:\n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\n// Include the css;\nimport 'vue-data-ui/style.css';\n\n// You can declare Vue Data UI components globally\nimport { VueUiRadar } from 'vue-data-ui';\n\nconst app = createApp(App);\n\napp.component('VueUiRadar', VueUiRadar);\napp.mount('#app');\n```\n\nOr you can import just what you need into your files:\n\n```js\n\u003cscript setup\u003eimport {(VueUiRadar, VueUiXy)} from \"vue-data-ui\";\u003c/script\u003e\n```\n\nYou 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.\n\n```js\n\u003cscript setup\u003e\nimport { ref } from \"vue\";\nimport { VueDataUi } from \"vue-data-ui\";\n// Include the css;\nimport \"vue-data-ui/style.css\";\n\nconst config = ref({...});\nconst dataset = ref([...]);\n\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n\n \u003cVueDataUi\n component=\"VueUiXy\"\n :config=\"config\"\n :dataset=\"dataset\"\n /\u003e\n\n\u003c/template\u003e\n\n```\n\nNote that the following utility components are not supported by the universal VueDataUi component and must be imported individually:\n\n- Arrow\n- VueUiIcon\n- VueUiPattern\n\n## Typescript\n\nTypes are available in the 'vue-data-ui.d.ts' file under the types directory of the package.\n\n## Vue Data UI version2 -\u003e version3 migration\n\nVue Data UI v3 does not contain breaking changes.\nHowever, some charts have their padding configs modified, which can lead to excessive padding with a v2 config.\n\n### Version 3 features\n\n- `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.\n\n- `config.debug` (default: false) set to true to show warning messages during development, turn off for production.\n\n- smart label resizing and auto-rotating features\n\n- more charts support responsive mode\n\n- config event callbacks\n\n## Nuxt\n\n[This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)\n\n# Customizable tooltips\n\nCharts with tooltips have a config option to customize tooltip contents:\n\n```js\n\ncustomFormat: ({ seriesIndex, datapoint, series, config }) =\u003e {\n return `\u003cdiv\u003e${ ... }\u003c/div\u003e`;\n}\n\n```\n\n# Data formatting\n\nData labels can be customized using the `formatter` config attribute (since v2.3.29 on all chart components):\n\n```\n// the formatter attribute is generally placed under the label or dataLabel config attribute objects\n\nconst config = ref({\n formatter: ({ value, config }) =\u003e {\n return `formatted ${value}`;\n }\n})\n\n```\n\n# Slots\n\n## #svg slot\n\nMost Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).\n\n```html\n\u003cVueUiXy :dataset=\"dataset\" :config=\"config\"\u003e\n \u003ctemplate #svg=\"{ svg }\"\u003e\n \u003cforeignObject x=\"100\" y=\"0\" height=\"100\" width=\"150\"\u003e\n \u003cdiv\u003eThis is a custom caption\u003c/div\u003e\n \u003c/foreignObject\u003e\n \u003c/template\u003e\n\u003c/VueUiXy\u003e\n```\n\nThe svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.\n\n## #legend slot (since v.2.0.41)\n\nAll charts expose a #legend slot except for:\n\n- VueUiCirclePack\n- VueUiDumbbell\n- VueUiFlow\n- VueUiFunnel\n- VueUiHeatmap\n- VueUiRelationCircle\n- VueUiSparkHistogram\n- VueUiSparkStackbar\n- VueUiSparkbar\n- VueUiSparkgauge\n- VueUiSparkline\n- VueUiThermometer\n- VueUiTimer\n- VueUiTiremarks\n- VueUiWheel\n\nThe legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.\nIt is recommended to set the show legend config attribute to false, to hide the default legend.\n\n```html\n\u003cVueUiDonut :config=\"config\" :dataset=\"dataset\"\u003e\n \u003ctemplate #legend=\"{ legend }\"\u003e\n \u003cdiv v-for=\"item in legend\"\u003e{{ legend.name }}\u003c/div\u003e\n \u003c/template\u003e\n\u003c/VueUiDonut\u003e\n```\n\n## Legend toggle\n\nAn opt-in config option displays a toggle button to hide/show all series, when the number of series \u003e 2.\nThis attribute can be found in the `legend.selectAllToggle` config section:\n\n```js\nlegend: {\n selectAllToggle: {\n show: false,\n backgroundColor: '#E1E5E8',\n color: '#2D353C'\n }\n}\n```\n\nThis legend toggle option is available for the following components:\n\n- VueUiDonut\n- VueUiDonutEvolution\n- VueUiGalaxy\n- VueUiHistoryPlot\n- VueUiHorizontalBar\n- VueUiNestedDonuts\n- VueUiOnion\n- VueUiParallelCoordinatePlot\n- VueUiQuadrant\n- VueUiQuickChart\n- VueUiRadar\n- VueUiRidgeline\n- VueUiRings\n- VueUiRings\n- VueUiScatter\n- VueUiSparkStackbar\n- VueUiStackbar\n- VueUiStackline\n- VueUiTreemap\n- VueUiWaffle\n- VueUiWorld\n- VueUiXy\n- VueUiXyCanvas\n\n## Tooltip slots\n\nUse the #tooltip slot to customize tooltip contents.\nYou will usually only need the `datapoint` attribute exposed by the slot, but you can always log what the slot provides if you need more.\n\n```html\n\u003cVueUiXy :dataset :config\u003e\n \u003ctemplate #tooltip=\"{ ...tooltip }\"\u003e\n \u003cdiv\u003e\n \u003cspan\u003e{{ tooltip.timeLabel.text }}\u003c/span\u003e\n \u003cdiv v-for=\"serie in tooltip.datapoint\" :key=\"serie.id\"\u003e\n {{ serie.name }}: {{ serie.value }}\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/template\u003e\n\u003c/VueUiXy\u003e\n```\n\nCustomize tooltip contents with #tooltip-before and #tooltip-after slots, to include an image, another chart or any other rich content into your tooltips.\nIt's an alternative to the config option `tooltip.customFormat`, in case richer tooltip content is needed.\n\nAll slots expose the following object:\n\n```\n{\n datapoint,\n seriesIndex,\n series,\n config,\n}\n```\n\nComponents with time series will also expose an additional `timeLabel` attribute.\n\nThe following charts bear these slots:\n\n- VueUiAgePyramid\n- VueUiCandlestick\n- VueUiCirclePack\n- VueUiDonut\n- VueUiGalaxy\n- VueUiHeatmap\n- VueUiHistoryPlot\n- VueUiHorizontalBar\n- VueUiMolecule\n- VueUiNestedDonuts\n- VueUiOnion\n- VueUiParallelCoordinatePlot\n- VueUiQuadrant\n- VueUiQuickChart\n- VueUiRadar\n- VueUiRings\n- VueUiScatter\n- VueUiSparkStackbar\n- VueUiStackbar\n- VueUiStackline\n- VueUiTreemap\n- VueUiWordCloud\n- VueUiWorld\n- VueUiXy \\*\n- VueUiXyCanvas\n- VueUiwaffle\n\n\\* VueUiXy slots specifically expose the following additional attributes:\n\n```\n\n{\n ...,\n bars,\n lines,\n plots\n}\n\n```\n\n```html\n\u003cVueUiDonut :config=\"config\" :dataset=\"dataset\"\u003e\n \u003ctemplate #tooltip-before={ datapoint, seriesIndex, dataset, config }\"\u003e\n \u003cdiv\u003e\n This content shows first\n \u003c/div\u003e\n \u003c/template\u003e\n \u003ctemplate #tooltip-after={ datapoint, seriesIndex, dataset, config }\"\u003e\n \u003cdiv\u003e\n This content shows the last\n \u003c/div\u003e\n \u003c/template\u003e\n\u003c/VueUiDonut\u003e\n```\n\nThe #tooltip-before \u0026 #tooltip-after slots also work when using the VueDataUi universal component, if the component it wraps supports them.\n\n## Add a watermark using the #watermark slot\n\nYou can use the #watermark slot to include any watermark content with your own styling.\nThis slot exposes the isPrinting boolean you can use to display the watermark only when producing a pdf or an image.\n\n```html\n\u003cVueUiDonut :config=\"config\" :dataset=\"dataset\"\u003e\n \u003ctemplate #watermark=\"{ isPrinting }\"\u003e\n \u003cdiv\n v-if=\"isPrinting\"\n style=\"font-size: 100px; opacity: 0.1; transform: rotate(-10deg)\"\n \u003e\n WATERMARK\n \u003c/div\u003e\n \u003c/template\u003e\n\u003c/VueUiDonut\u003e\n```\n\n## Customization of the zoom reset button with the #reset-action slot\n\nAvailable for the following components:\n\n- VueUiQuickChart (for line \u0026 bar types only)\n- VueUiXy\n- VueUiDonutEvolution\n- VueUiCandlestick\n- VueUiWordCloud\n\nThe config option zoom.useResetSlot must be set to true to use the slot.\n\n```html\n\u003cVueUiXy :config=\"config\" :dataset=\"dataset\"\u003e\n \u003ctemplate #reset-action=\"{ reset }\"\u003e\n \u003cbutton @click=\"reset()\"\u003eRESET ZOOM\u003c/button\u003e\n \u003c/template\u003e\n\u003c/VueUiXy\u003e\n```\n\n# Config\n\nIf for some reason you can't access the documentation website and need to get the default config object for a component:\n\n```js\nimport { getVueDataUiConfig } from 'vue-data-ui';\n\nconst defaultConfigXy = getVueDataUiConfig('vue_ui_xy');\n```\n\n# Themes (since v2.2.9)\n\nAll charts are set by default without a theme, and use the default color palette.\n\n9 themes are available for all charts:\n\n- default (or '')\n- dark\n- zen\n- hack\n- concrete\n- celebration\n- celebrationNight\n- minimal\n- minimalDark\n\nAny color provided in dataset props will override the colors used by the theme for datapoints.\n\nTo use a theme, set the theme attribute of the config prop, for example:\n\n```js\nconst donutConfig = ref({\n theme: 'zen',\n ...\n})\n```\n\n# Quick custom theme\n\nYou can quickly setup your own theme for a given chart:\n\n```js\nimport { getVueDataUiConfig, mergeConfigs } from 'vue-data-ui';\n\n// Get the default config and set color options\nconst customTheme = getVueDataUiConfig('vue_ui_xy', {\n colorBackground: '#1A1A1A',\n colorTextPrimary: '#CD9077',\n colorTextSecondary: '#825848',\n colorGrid: '#CD9077',\n colorBorder: '#CD9077',\n});\n\nconst config = computed(() =\u003e {\n // Use the `mergeConfigs` utility to set additional configurations while preserving your theme\n return mergeConfigs({\n defaultConfig: customTheme,\n userConfig: {\n chart: {\n title: {\n text: 'Title',\n subtitle: {\n text: 'Subtitle',\n },\n },\n },\n },\n });\n});\n```\n\n# Available components : details\n\nType definitions are available in the `vue-data-ui.d.ts` file in the `dist/types` directory.\n\n### Universal component\n\n| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |\n| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- | ---------------------- |\n| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |\n\n### Quick chart\n\nFrom the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)\n\n| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |\n| ----------------- | ------------------------ | ----------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | -------------- | ------ |\n| `VueUiQuickChart` | `VueUiQuickChartDataset` | `VueUiQuickChartConfig` | `@selectDatapoint`, `@selectLegend`, `generatePdf`, `generateImage`, `toggleTooltip` | `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background` | ✅ | ✅ |\n\n### Mini charts\n\n| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |\n| --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------------- | ----------------------------------------------------------- | -------------- | ------ |\n| `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg`, `#before`, `#chart-background`, `#tooltip`, `#hint` | ✅ | ✅ |\n| `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | `#data-label`, `#title` | ❌ | ✅ |\n| `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#hint` | ✅ | ✅ |\n| `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | `#chart-background`, `#hint` | ❌ | ✅ |\n| `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | `#chart-background` | ❌ | ✅ |\n| `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | `#chart-background` | ❌ | ✅ |\n| `VueUiGizmo` | `VueUiGizmoDataset` | `VueUiGizmoConfig` | ❌ | ❌ | ❌ | ❌ |\n| `VueUiBullet` | `VueUiBulletDataset` | `VueUiBulletConfig` | `generatePdf`, `generateImg`, `getData`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |\n\n### Charts\n\n| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |\n| ----------------------------- | ------------------------------------------ | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ |\n| `VueUiAgePyramid` | `Array\u003cArray\u003cstring / number\u003e\u003e` | `VueUiSparklineConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ |\n| `VueUiBump` | `VueUiBumpDatapointItem[]` | `VueUiBumpConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `getData`, `getImage` | `#svg`, `#watermark`, `#chart-background`, `#time-label`, `#hint` | ❌ | ✅ |\n| `VueUiCandlestick` | `Array\u003cArray\u003cstring / number\u003e\u003e` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ |\n| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#hint`, `#hint` | ❌ | ✅ |\n| `VueUiChord` | `VueUiChordDataset` | `VueUiChordConfig` | `@selectLegend`, `@selectGroup`, `@selectRibbon`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern`, `#hint` | ❌ | ✅ |\n| `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` | ✅ | ✅ |\n| `VueUiDag` | `VueUiDagDataset` | `VueUiDagConfig` | `@onNodeClick`, `@onMidpointEnter`, `@onMidpointLeave`, `getData`, `getImage`, `generatePdf`, `generateImage`, `generateSvg`, `toggleAnnotator`, `toggleFullscreen`, `zoomIn`, `zoomOut`, `resetZoom`, `switchDirection` | `#svg`, `#source`, `#node-label`, `#node`, `#tooltip-midpoint`, `#tooltip-node`, `#background-pattern`, `#hint` | ❌ | ✅ |\n| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ |\n| `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` | ✅ | ✅ |\n| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ |\n| `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#hint` | ✅ | ✅ |\n| `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ |\n| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`,`#tooltip`, `#tooltip-before`, `#tooltip-after`, `#chart-background`, `#hint` | ✅ | ✅ |\n| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage`, `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |\n| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `@selectDatapoint`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ |\n| `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` | ✅ | ✅ |\n| `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` | ✅ | ✅ |\n| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `@selectNode`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`, `getImage` | `#node`, `#svg`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |\n| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ |\n| `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` | ✅ | ✅ |\n| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`, `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ |\n| `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` | ✅ | ✅ |\n| `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` | ✅ | ✅ |\n| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ |\n| `VueUiRidgeline` | `VueUiRidgelineDatasetItem[]` | `VueUiRidgelineConfig` | `@selectLegend`, `@selectX`, `@selectDatapoint`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` , `getImage` | `#svg`, `#legend`, `#time-label`,`#watermark`, `#chart-background`, `#pattern`, `#hint` | ❌ | ✅ |\n| `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` | ✅ | ✅ |\n| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ |\n| `VueUiStackbar` | `VueUiStackbarDatasetItem[]` | `VueUiStackbarConfig` | `@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` | ✅ | ✅ |\n| `VueUiStackline` | `VueUiStacklineDatasetItem[]` | `VueUiStacklineConfig` | `@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` | ✅ | ✅ |\n| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#hint` | ✅ | ✅ |\n| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |\n| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |\n| `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` | ✅ | ✅ |\n| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage`, `#hint` | `#svg`, `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ |\n| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |\n| `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` , `getImage`, `#hint` | `#svg`, `#reset-action`, `#watermark`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |\n| `VueUiXyCanvas` | `VueUiXyCanvasDatasetItem[]` | `VueUiXyCanvasConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip` , `getImage`, `#hint` | `#legend`, `#tooltip`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark` | ✅ | ✅ |\n| `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` | ✅ | ✅ |\n\n### 3D charts\n\n| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |\n| ------------ | ------------------- | ------------------ | --------------------------------------------------------- | -------------------------------------------------- | -------------- | ------ |\n| `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage`, `toggleTable`, `getImage` | `#svg`, `#watermark`, `#chart-background`, `#hint` | ❌ | ✅ |\n\n### Maps\n\n| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |\n| ------------ | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- | -------------- | ------ |\n| `VueUiGeo` | `VueUiGeoDatasetItem[]` | `VueUiGeoConfig` | `generatePdf`, `generateImage`, `toggleTooltip`, `toggleAnnotator`, `getImage`, `zoomIn`, `zoomOut`, `resetZoom`, `focusLocation`, `#hint` | `#svg`, `#watermark`, `#pattern`, `#chart-background`, `#datapoint` | ✅ | ✅ |\n| `VueUiWorld` | `VueUiWorldDataset` | `VueUiWorldConfig` | `getData`, `generatePdf`, `generateImage`, `toggleTable`, `toggleTooltip`, `toggleAnnotator`, `getImage` | `#svg`, `#watermark`, `#pattern`, `#chart-background` | ✅ | ❌ |\n\n### Data tables\n\n| Name | dataset type | config type | emits / exposed methods | slots | themes |\n| --------------------- | ---------------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------ |\n| `VueUiTable` | `VueUiTableDataset` | `VueUiTableConfig` | ❌ | ❌ | ❌ |\n| `VueUiTableHeatmap` | `VueUiTableHeatmapDatasetItem[]` | `VueUiTableHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#caption`, `#rowTitle`, `#cell`, `#sum`, `#average`, `#median` | ✅ |\n| `VueUiTableSparkline` | `VueUiTableSparklineDatasetItem[]` | `VueUiTableSparklineConfig` | `generatePdf`, `generateCsv`, `generateImage` | ❌ | ✅ |\n| `VueUiCarouselTable` | `VueUiCarouselTableDataset` | `VueUiCarouselTableConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleAnimation`, `pauseAnimation`, `resumeAnimation` | `#caption`, `#th`, `#td` | ❌ |\n\n### Rating\n\n| Name | dataset type | config type | emits / exposed methods | slots |\n| ------------- | -------------------- | ------------------- | ----------------------------------- | ------------------------------ |\n| `VueUiRating` | `VueUiRatingDataset` | `VueUiRatingConfig` | `@rate`, `getData`,`toggleReadonly` | `#layer-under`, `#layer-above` |\n| `VueUiSmiley` | `VueUiRatingDataset` | `VueUiSmileyConfig` | `@rate`, `getData`,`toggleReadonly` | |\n\n### Utilities\n\n| Name | dataset type | config type | emits / exposed methods | slots |\n| ----------------- | ------------------------- | ----------------------- | ------------------------------------------------ | ------------------------------------------------------- |\n| `VueUiAccordion` | ❌ | `VueUiAccordionConfig` | ❌ | `#arrow`, `#title`, `#content` |\n| `VueUiAnnotator` | `VueUiAnnotatorDataset` | `VueUiAnnotatorConfig` | `@toggleOpenState`, `@saveAnnotations` | ❌ |\n| `VueUiCursor` | ❌ | `VueUiCursorConfig` | ❌ | ❌ |\n| `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | `#content`, `#top`, `#bottom` |\n| `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |\n| `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |\n| `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |\n| `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |\n| `VueUiTimer` | ❌ | `VueUiTimerConfig` | `@start`, `@pause`, `@reset`, `@restart`, `@lap` | `#time`, `#controls`, `#laps`, `#chart-background` |\n| `VueUiIcon` | see below | - | - | `#exp`, `#sub` |\n\n### Icons\n\nTailor made icons are available through the VueUiIcon component:\n\n```html\n\u003cVueUiIcon name=\"arrowRight\" :size=\"24\" stroke=\"#6376DD\" /\u003e\n```\n\nAll names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.\n\n`VueUiIcon` props:\n\n| Name | type | Default value |\n| -------------- | ---------------- | ------------- |\n| `name` | `VueUiIconName` | `undefined` |\n| `size` | `number` | `24` |\n| `stroke` | `string` (color) | `'#CCCCCC'` |\n| `strokeWidth` | `number` | `1.5` |\n| `isSpin` | `boolean` | `false` |\n| `spinDuration` | `string` | `'1s'` |\n\nIcons have 2 slots that can be used to display exp or sub icons:\n\n```html\n\u003cVueUiIcon name=\"database\"\u003e\n \u003ctemplate #exp v-if=\"isLoading\"\u003e\n \u003cVueUiIcon name=\"spinner2\" :is-spin=\"true\"/\u003e\n \u003c/template\u003e\n \u003ctemplate #sub\u003e\n \u003cVueUiIcon name=\"person\"/\u003e\n \u003c/sub\u003e\n\u003c/VueUiIcon\u003e\n```\n\n# User options\n\nUser options menu is accessible in the burger menu located on the top right of the charts, and visible by default.\nTo hide the user options menu, set config.userOptions.show to false:\n\n```js\nconst config = ref({\n userOptions: {\n show: false\n },\n ...\n})\n```\n\nThe user options menu can be set to appear only when hovering over the component:\n\n```js\nconst config = ref({\n userOptions: {\n show: true,\n showOnChartHover: true, // Default: false\n keepStateOnChartLeave: true, // Set to false to always close the menu when hovering out of the chart\n },\n});\n```\n\nPredefined actions in the user options menu depend on the type of chart. Some charts have more or fewer actions available. Action buttons contain predefined icons by default.\n\nTo hide a given action, set the userOption.buttons, for example:\n\n```js\nconst config = ref({\n userOptions: {\n show: true,\n buttons: {\n pdf: false,\n fullscreen: false,\n altCopy: true,\n // all other pertinent actions for the component will be visible by default (list of all actions below)\n },\n },\n});\n```\n\nYou can use slots to override the content of action buttons.\nWhat happens when the button is clicked is taken care of by the component, except for the optionFullscreen slot.\n\n```html\n\u003cVueUiDonut :config=\"config\" :dataset=\"dataset\"\u003e\n \u003ctemplate #optionPdf\u003e GENERATE PDF \u003c/template\u003e\n\n \u003c!-- This is the only action where scoped content is provided --\u003e\n \u003ctemplate template #optionFullscreen=\"{ isFullscreen, toggleFullscreen }\"\u003e\n \u003cdiv @click=\"toggleFullscreen(isFullscreen ? 'out' : 'in')\"\u003e\n TOGGLE FULLSCREEN\n \u003c/div\u003e\n \u003c/template\u003e\n\u003c/VueUiDonut\u003e\n```\n\nYou can pass a callback through the config, for each button, to override the default behavior:\n\n```ts\nconst config = {\n userOptions: {\n callbacks: {\n pdf: ({ chartElement, imageUri, base64 }) =\u003e {\n console.log(chartElement);\n },\n img: ({ chartElement, imageUri, base64 }) =\u003e {\n console.log(base64);\n },\n csv: (csvStr: string) =\u003e {\n console.log(csvStr);\n },\n altCopy: ({ dataset: dst, config: cfg }) =\u003e {\n console.log({ dst, cfg });\n },\n // the other attributes also have the same names as the buttons\n },\n },\n};\n```\n\nUser options actions available per chart:\n\n| Chart name | User options actions slot names |\n| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| VueUi3dBar | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiAgePyramid | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiBump | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiBullet | optionAltCopy, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiCandlestick | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiCarouselTable | optionAltCopy, optionPdf, optionImg, optionCsv, optionAnimation, optionFullscreen |\n| VueUiChestnut | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiChord | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiCirclePack | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiDag | optionAltCopy, optionPdf, optionImg, optionSvg, optionFullscreen, optionAnnotator, optionZoom |\n| VueUiDonut | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiDonutEvolution | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiDumbbell | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiFlow | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiFunnel | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiGalaxy | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiGauge | optionAltCopy, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiGeo | optionAltCopy, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionZoom, optionSvg |\n| VueUiHeatmap | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiHistoryPlot | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiHorizontalBar | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiMolecule | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionZoom, optionSvg |\n| VueUiMoodRadar | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiNestedDonuts | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiOnion | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiParallelCoordinatePlot | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiQuadrant | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiQuickChart | optionAltCopy, optionTooltip, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiRadar | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiRelationCircle | optionAltCopy, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiRidgeline | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiRings | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionLabels, optionSvg |\n| VueUiScatter | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiSparkHistogram | (no user options menu) |\n| VueUiSparkStackbar | (no user options menu) |\n| VueUiSparkTrend | (no user options menu) |\n| VueUiSparkbar | (no user options menu) |\n| VueUiSparkgauge | (no user options menu) |\n| VueUiSparkline | (no user options menu) |\n| VueUiStackbar | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiStackline | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiStripPlot | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiTableHeatmap | optionAltCopy, optionPdf, optionImg, optionCsv, optionFullscreen |\n| VueUiTableSparkline | optionAltCopy, optionPdf, optionImg, optionCsv, optionFullscreen |\n| VueUiThermometer | optionAltCopy, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiTiremarks | optionAltCopy, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiTreemap | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator , optionSvg |\n| VueUiWaffle | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator , optionSvg |\n| VueUiWheel | optionAltCopy, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiWordCloud | optionAltCopy, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionZoom, optionSvg |\n| VueUiWorld | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg |\n| VueUiXy | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator, optionSvg |\n| VueUiXyCanvas | optionAltCopy, optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator |\n\nUser options menu icon can be customized using the #menuIcon slot:\n\n```html\n\u003ctemplate #menuIcon=\"{ isOpen, color }\"\u003e\n \u003cdiv\u003e{{ isOpen ? 'close' : 'open' }}\u003c/div\u003e\n\u003c/template\u003e\n```\n\nSince version 3.5.1, slots are exposed to customize the chart annotator sub-menu:\n\n```html\n\u003cVueUiXy :dataset=\"dataset\" :config=\"config\"\u003e\n \u003ctemplate #annotator-action-close\u003e\n \u003cMyCloseIcon /\u003e\n \u003c/template\u003e\n \u003ctemplate #annotator-action-color=\"{ color }\"\u003e\n \u003cMyColorIcon :color=\"color\" /\u003e\n \u003c/template\u003e\n \u003ctemplate #annotator-action-draw=\"{ mode }\"\u003e\n \u003cMyDrawIcon v-if=\"mode === 'draw'\" /\u003e\n \u003cMyTextIcon v-else /\u003e\n \u003c/template\u003e\n \u003ctemplate #annotator-action-undo=\"{ disabled }\"\u003e\n \u003cMyUndoIcon /\u003e\n \u003c/template\u003e\n \u003ctemplate #annotator-action-redo=\"{ disabled }\"\u003e\n \u003cMyRedoIcon /\u003e\n \u003c/template\u003e\n \u003ctemplate #annotator-action-delete=\"{ disabled }\"\u003e\n \u003cMyDeleteIcon /\u003e\n \u003c/template\u003e\n\u003c/VueUiXy\u003e\n```\n\n# Custom palette\n\nIt is possible to provide a custom palette in the config prop through config.customPalette (string[]) for the following components:\n\n- VueUi3dBar\n- VueUiBump\n- VueUiChestnut\n- VueUiChord\n- VueUiCirclePack\n- VueUiDonut\n- VueUiDonutEvolution\n- VueUiFlow\n- VueUiGalaxy\n- VueUiGauge\n- VueUiHistoryPlot\n- VueUiHorizontalBar\n- VueUiMolecule\n- VueUiNestedDonuts\n- VueUiOnion\n- VueUiParallelCoordinatePlot\n- VueUiQuadrant\n- VueUiQuickChart\n- VueUiRadar\n- VueUiRelationCircle\n- VueUiRidgeline\n- VueUiRings\n- VueUiScatter\n- VueUiSparkStackbar\n- VueUiSparkbar\n- VueUiStackbar\n- VueUiStackline\n- VueUiStripPlot\n- VueUiTableSparkline\n- VueUiThermometer\n- VueUiTreemap\n- VueUiWaffle\n- VueUiWordCloud\n- VueUiWorld\n- VueUiXy\n- VueUiXyCanvas\n\nIf the array of colors provided in customPalette is too small for the dataset, remaining colors will be computed from the default internal palette.\nAccepted color formats: HEX, RGB, HSL, named colors.\n\n# Responsive charts\n\nBy default, all charts will scale to the width of their container.\nHowever the following charts can be made fully responsive, making them better to use in resizable containers:\n\n| Component | Responsive feature implemented |\n| --------------------------- | ------------------------------ |\n| VueUi3dBar | ✅ |\n| VueUiAgePyramid | ✅ |\n| VueUiAgePyramid | ✅ |\n| VueUiBullet | ✅ |\n| VueUiBump | ✅ |\n| VueUiCarouselTable | - |\n| VueUiChestnut | - |\n| VueUiChord | ✅ |\n| VueUiCirclePack | ✅ |\n| VueUiDag | ✅ |\n| VueUiDonut | ✅ |\n| VueUiDonutEvolution | ✅ |\n| VueUiDumbbell | ✅ |\n| VueUiFlow | ✅ |\n| VueUiFunnel | ✅ |\n| VueUiGalaxy | ✅ |\n| VueUiGauge | ✅ |\n| VueUiGeo | ✅ |\n| VueUiHeatmap | ✅ |\n| VueUiHistoryPlot | ✅ |\n| VueUiHorizontalBar | ✅ |\n| VueUiMolecule | - |\n| VueUiMoodRadar | ✅ |\n| VueUiNestedDonuts | ✅ |\n| VueUiOnion | ✅ |\n| VueUiParallelCoordinatePlot | ✅ |\n| VueUiQuadrant | ✅ |\n| VueUiQuickChart | ✅ |\n| VueUiRadar | ✅ |\n| VueUiRelationCircle | ✅ |\n| VueUiRidgeline | ✅ |\n| VueUiRings | ✅ |\n| VueUiScatter | ✅ |\n| VueUiSparkHistogram | ✅ |\n| VueUiSparkStackbar | - |\n| VueUiSparkTrend | ✅ |\n| VueUiSparkbar | - |\n| VueUiSparkgauge | - |\n| VueUiSparkline | ✅ |\n| VueUiStackbar | ✅ |\n| VueUiStackline | ✅ |\n| VueUiStripPlot | ✅ |\n| VueUiTableHeatmap | - |\n| VueUiTableSparkline | - |\n| VueUiThermometer | ✅ |\n| VueUiTimer | ✅ |\n| VueUiTiremarks | ✅ |\n| VueUiTreemap | ✅ |\n| VueUiWaffle | ✅ |\n| VueUiWheel | ✅ |\n| VueUiWordCloud | ✅ |\n| VueUiWorld | - |\n| VueUiXy | ✅ |\n| VueUiXyCanvas | ✅ |\n\nTo activate responsiveness, set the config.responsive attribute to true:\n\n```js\nconst config = ref({\n responsive: true,\n // rest of your config\n});\n```\n\n**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.\n\n# Big data optimization (since v2.4.11)\n\nVery large datasets (\u003e 5k or \u003e 10k datapoints) will cause the browsers rendering engines to slow down, caused by too many SVG DOM elements to render.\nThe 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:\n\n| Component | Default Threshold | Remark |\n| --------------- | ----------------- | ------------------------------------------------------------- |\n| VueUiXy | 1095 | |\n| VueUiXyCanvas | 10000 | Since this chart uses canvas, the threshold can be set higher |\n| VueUiQuadrant | 1095 | |\n| VueUiScatter | 1095 | |\n| VueUiSparkline | 1095 | |\n| VueUiSparkTrend | 1095 | |\n\nThe downsample threshold for each component can be set in the config prop passed to components:\n\n```js\nconst config = ref({\n downsample: {\n threshold: 500,\n },\n ...// rest of your config\n})\n```\n\n# Chart custom background (since v2.4.59)\n\nA #chart-background slot is available on most charts to customize their background, to display a gradient, an image, etc.\nThe content placed inside this slot has pointer-events set to none, so it does not interfere with the components' interactivity.\n\n```html\n\u003cVueUiXy :config=\"config\" :dataset=\"dataset\"\u003e\n \u003ctemplate #chart-background\u003e\n \u003cdiv\n style=\"width: 100%; height: 100%; background: radial-gradient(at top left, red, white)\"\n /\u003e\n \u003c/template\u003e\n\u003c/VueUiXy\u003e\n```\n\nThe following components do not support this slot, because it would not make sense:\n\n- VueUiCarouselTable\n- VueUiDag\n- VueUiGizmo\n- VueUiIcon\n- VueUiKpi\n- VueUiRating\n- VueUiSmiley\n- VueUiSparkStackbar\n- VueUiSparkbar\n- VueUiTableHeatmap\n- VueUiTableSparkline\n- VueUiTreemap\n- VueUiWaffle\n- VueUiXyCanvas\n\n# Pattern slot (v2.4.67+)\n\nA #pattern slot is available on some components to apply custom patterns on datapoints for further customization.\nThe slot exposes the seriesIndex, and a patternId which must be used on the pattern element to be recognized.\nA pattern element must be used inside this slot. It will be injected inside a defs element of the component.\n\n```html\n\u003cVueUiDonut :config=\"config\" :dataset=\"dataset\"\u003e\n \u003ctemplate #pattern=\"{ seriesIndex, patternId }\"\u003e\n \u003c!-- Apply a pattern on the first datapoint only --\u003e\n \u003cpattern\n v-if=\"seriesIndex === 0\"\n :id=\"patternId\"\n viewBox=\"0,0,10,10\"\n width=\"10%\"\n height=\"10%\"\n \u003e\n \u003cpolygon points=\"0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2\" /\u003e\n \u003c/pattern\u003e\n \u003c/template\u003e\n\u003c/VueUiDonut\u003e\n```\n\nThe #pattern slot is available on the following components:\n\n- VueUiChord\n- VueUiCirclePack\n- VueUiDonut\n- VueUiGauge\n- VueUiRidgeline\n- VueUiRings\n- VueUiStackbar\n- VueUiStackline\n- VueUiHorizontalBar\n- VueUiWaffle\n- VueUiWorld\n- VueUiXy\n\nA set of 12 readymade patterns is available through the VueUiPattern component:\n\n```js\nimport { VueUiPattern } from 'vue-data-ui';\n```\n\n```html\n\u003cVueUiDonut :dataset=\"dataset\" :config=\"config\"\u003e\n \u003ctemplate #pattern=\"{ seriesIndex, patternId }\"\u003e\n \u003cVueUiPattern :id=\"patternId\" name=\"bubbles\" v-if=\"seriesIndex === 0\" /\u003e\n \u003cVueUiPattern :id=\"patternId\" name=\"squares\" v-if=\"seriesIndex === 1\" /\u003e\n \u003c/template\u003e\n\u003c/VueUiDonut\u003e\n```\n\nVueUiPattern accepts the following props:\n\n- id: string, required. Pass the patternId provided by the #pattern slot\n- name: string, required. The name of the pattern to use\n- fill: string, optional. The backgroundColor of the pattern. Transparent by default to show the datapoint base color\n- stroke: string, optional. Default: #2D353C\n- strokeWidth: number, optional. Default: 1\n- scale: number, optional. Default: 1\n\nList of available patterns:\n\n| pattern name |\n| ---------------- |\n| bubbles |\n| flooring |\n| grid |\n| hexagon-diamond |\n| hexagon-flooring |\n| hexagon-grid |\n| maze |\n| redrum |\n| scales |\n| squares |\n| wave |\n| zigzag |\n\n# Utility functions\n\nA set of utility functions is available:\n\n```js\nimport {\n abbreviate,\n darkenColor,\n lightenColor,\n shiftColorHue,\n createTSpans,\n getCumulativeAverage,\n getCumulativeMedian,\n} from 'vue-data-ui';\n```\n\n### abreviate\n\n```js\nimport { abbreviate } from 'vue-data-ui';\n\nconst text = 'lorem ipsum dolor sit amet';\nconst abbreviated = abbreviate({\n source: text,\n length: 5,\n}); // Result: LIDSA\n```\n\n### darkenColor\n\n```js\nimport { darkenColor } from 'vue-data-ui';\n\nconst color = '#FF0000';\nconst darkened = darkenColor(color, 0.5); // Result: #800000ff\n```\n\n### lightenColor\n\n```js\nimport { lightenColor } from 'vue-data-ui';\n\nconst color = '#FF0000';\nconst lightened = lightenColor(color, 0.5); // Result: #ff8080ff\n```\n\n### shiftColorHue\n\n```js\nimport { shiftColorHue } from 'vue-data-ui';\n\n// Color format can be HEX (with or without alpha channel), RGB, RGBA, or named color\nconst color = '#FF0000';\nconst shifted = shiftColorHue(color, 0.1); // Result: #ff9900ff\n```\n\n### createTSpans\n\n```js\nimport { createTSpans } from 'vue-data-ui';\n\nconst textContent = createTSpans({\n content: 'This is an example of multiline text',\n fontSize: 16,\n fill: '#1A1A1A',\n maxWords: 3,\n x: 10,\n y: 20,\n});\n```\n\n```html\n\u003c!-- 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 --\u003e\n\n\u003ctext\n :x=\"10\"\n :y=\"20\"\n fill=\"#1A1A1A\"\n :font-size=\"16\"\n text-anchor=\"middle\"\n v-html=\"textContent\"\n/\u003e\n```\n\n### getCumulativeAverage\n\n```js\nimport { getCumulativeAverage } from 'vue-data-ui';\n\n// simple usage\nconst arr = [0, 1, 2, 3, 4];\nconst cumulativeAvg = getCumulativeAverage({ values: arr });\n\n// Ignore invalid values entirely\nconst arrWithInvalid = [1, null, 2, Infinity, NaN, undefined];\nconst cumulativeAvgNoInvalid = getCumulativeAverage({\n values: arrWithInvalid,\n config: {\n keepInvalid: false,\n },\n});\n\n// Convert invalid values to zero\nconst cumulativeAvgZeroed = getCumulativeAverage({\n values: arrWithInvalid,\n config: {\n convertInvalidToZero: true,\n },\n});\n```\n\n### getCumulativeMedian\n\n```js\nimport { getCumulativeMedian } from 'vue-data-ui';\n\n// simple usage\nconst arr = [0, 1, 2, 3, 4];\nconst cumulativeMed = getCumulativeMedian({ values: arr });\n\n// Ignore invalid values entirely\nconst arrWithInvalid = [1, null, 2, Infinity, NaN, undefined];\nconst cumulativeMedNoInvalid = getCumulativeMedian({\n values: arrWithInvalid,\n config: {\n keepInvalid: false,\n },\n});\n\n// Convert invalid values to zero\nconst cumulativeMedZeroed = getCumulativeMedian({\n values: arrWithInvalid,\n config: {\n convertInvalidToZero: true,\n },\n});\n```\n\n### mergeConfigs\n\n```js\nimport { mergeConfigs, getVueDataUiConfig } from 'vue-data-ui';\nconst defaultConfig = getVueDataUiConfig('vue_ui_xy');\n\n// Create a full config with user overrides\nconst merged = mergeConfigs({\n defaultConfig,\n userConfig: {\n chart: {\n backgroundColor: '#FF0000',\n },\n },\n});\n```\n\n## Multiline data labels\n\nSome components will display labels on multiple lines when the provided text contains a line break. (example: \"I contain a\\nline break\").\nBelow is a table of the places where such line breaks can be used:\n\n| Component | Label displayed | Where to use line breaks |\n| --------------------------- | -------------------- | ------------------------------------------------------ |\n| VueUiBump | Series labels | dataset names |\n| VueUiDag | Node labels | dataset label |\n| VueUiDonutEvolution | Time labels (x axis) | config.style.chart.layout.grid.xAxis.dataLabels.values |\n| VueUiHistoryPlot | Plot labels | dataset names |\n| VueUiHorizontalBar | Series labels | dataset names |\n| VueUiParallelCoordinatePlot | Axis labels | config.style.chart.yAxis.labels.axisNames |\n| VueUiQuadrant | Plot labels | dataset names |\n| VueUiQuickChart | Time labels (x axis) | config.xyPeriods |\n| VueUiRidgeline | Time labels (x axis) | config.style.chart.xAxis.labels.values |\n| VueUiRings | Series labels | dataset names |\n| VueUiStackbar | Time labels (x axis) | config.style.chart.grid.x.timeLabels.values |\n| VueUiStackline | Time labels (x axis) | config.style.chart.grid.x.timeLabels.values |\n| VueUiStripPlot | x axis labels | dataset names |\n| VueUiXy | Time labels (x axis) | config.chart.grid.labels.xAxisLabels.values |\n\n## PDF generation\n\nThis package requires jspdf as a peer dependency. Please install it in your project if you intend to use the PDF printing feature.\n\n## `useObjectBindings`\n\nA composable that **flattens** a reactive object into a set of refs (one for each “leaf” property) so you can easily bind to deeply nested values by their string paths.\n\n### Why use it?\n\n- **Automatic reactivity**: Every nested property becomes a `Ref`, with automatic getters/setters that keep your source object in sync.\n- **Flat API surface**: Access or update any nested field by its dot‑delimited path, without writing deep destructuring or `ref` plumbing.\n- **Dynamic path support**: New paths added at runtime are discovered automatically (and proxied), so you never lose reactivity when mutating the structure.\n\n```js\nimport { useObjectBindings, getVueDataUiConfig } from 'vue-data-ui';\n\nconst config = ref(getVueDataUiConfig('vue_ui_donut')); // or your custom config for this component\n\nconst bindings = useObjectBindings(config);\n// Now `bindings` has computed refs for each leaf path:\n// bindings[\"style.chart.backgroundColor\"] → Ref\u003cstring\u003e\n// bindings[\"style.chart.color\"] → Ref\u003cstring\u003e\n// bindings[\"customPalette\"] → Ref\u003cboolean\u003e\n// by default, arrays are skipped:\n// no \"customPalette.0\", unless you disable skipArrays\n```\n\nYou can then use these in your template:\n\n```html\n\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cinput\n type=\"color\"\n v-model=\"bindings['style.chart.backgroundColor'].value\"\n /\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Exposed methods\n\nMost chart components expose the following methods:\n\n### getData\n\n```js\nconst componentRef = ref(null);\n\nonMounted(async () =\u003e {\n if (componentRef) {\n const data = await componentRef.value.getData();\n console.log(data);\n }\n});\n```\n\n### getImage\n\n```js\nconst componentRef = ref(null);\n\nonMounted(async () =\u003e {\n if (componentRef) {\n const { imgUri, base64, title, width, height, aspectRatio } =\n await componentRef.value.getImage({ scale: 2 }); // optional scale, defaults to 2, increase for better image quality\n console.log(imageUri);\n }\n});\n```\n\n### showSeries / hideSeries\n\n```ts\nshowSeries: (name: string) =\u003e void\nhideSeries: (name: string) =\u003e void\n```\n\nSet a ref on your chart component to call exposed methods:\n\n```html\n\u003cVueUiXy ref=\"chart\" :dataset=\"dataset\" :config=\"config\" /\u003e\n```\n\nExample:\n\n```js\nconst chart = ref(null); // Add this ref on the chart component\n\nfunction showSeriesByName(name) {\n if (!chart.value) return;\n chart.value.showSeries(name);\n}\n\nfunction hideSeriesByName(name) {\n if (!chart.value) return;\n chart.value.hideSeries(name);\n}\n```\n\n`showSeries` and `hideSeries` exposed methods are available on the following components:\n\n- VueUiDonut\n- VueUiDonutEvolution\n- VueUiGalaxy\n- VueUiHistoryPlot\n- VueUiHorizontalBar\n- VueUiNestedDonuts\n- VueUiOnion\n- VueUiParallelCoordinatePlot\n- VueUiQuadrant\n- VueUiRadar\n- VueUiRidgeline\n- VueUiRings\n- VueUiScatter\n- VueUiSparkStackbar\n- VueUiStackbar\n- VueUiStackline\n- VueUiTreemap\n- VueUiWaffle\n- VueUiXy\n- VueUiXyCanvas\n\n## a11y\n\n### Keyboard navigation\n\nChart components, when applicable, enable keyboard navigation inside the chart area (arrows), to cycle through datapoints when the chart area is in focus.\n\nIt is possible to configure the following translations, used in hidden hints for screenreaders:\n\n```js\nconst config = computed(() =\u003e ({\n a11y: {\n translations: {\n keyboardNavigation:\n 'Use the left and right arrow keys to move between data points.',\n tableAvailable: 'A data table for this chart is available below.',\n tableCaption: 'Chart data table',\n },\n },\n}));\n```\n\nA #hint scoped slot is available to display a navigation hint when the chart area is in focus. This slot exposes the `a11y.translations.keyboardNavigation` text, and a `isVisible` boolean which is `true` when the chart area is in focus. The hint is absolutely positioned below the chart area.\n\n```html\n\u003cVueUiXy :dataset :config\u003e\n \u003ctemplate #hint=\"{ hint, isVisible }\"\u003e\n \u003c!-- Slot content is absolutely positoned below the chart area, but you can style it to adjust the position. --\u003e\n \u003cp v-if=\"isVisible\"\u003e{{ hint }}\u003c/p\u003e\n \u003c/template\u003e\n\u003c/VueUiXy\u003e\n```\n\nThe #hint slot is available for the following components:\n\n- VueUiAgePyramid\n- VueUiBump\n- VueUiCandlestick\n- VueUiChord\n- VueUiCirclePack\n- VueUiDag\n- VueUiDonutEvolution\n- VueUiDonut\n- VueUiDumbbell\n- VueUiFlow\n- VueUiGalaxy\n- VueUiGeo\n- VueUiHeatmap\n- VueUiHistoryPlot\n- VueUiHorizontalBar\n- VueUiMoodRadar\n- VueUiNestedDonuts\n- VueUiOnion\n- VueUiParallelCoordinatePlot\n- VueUiQuadrant\n- VueUiQuickChart\n- VueUiRadar\n- VueUiRelationCircle\n- VueUiRidgeline\n- VueUiRings\n- VueUiScatter\n- VueUiSparkHistogram\n- VueUiSparkline\n- VueUiSparkStackbar\n- VueUiStackbar\n- VueUiStackline\n- VueUiStripPlot\n- VueUiTreemap\n- VueUiWaffle\n- VueUiWordCloud\n- VueUiXy\n- VueUiXyCanvas\n\n### Copy alt text\n\nOn all charts with a contextual menu, the `altCopy` button can be enabled.\nThe purpose of this button is to provide the necessary data to create a custom alt text, that can be copied when posting a picture of the chart on socials for example.\n\n```js\nconst config = computed(() =\u003e (\n userOptions: {\n buttons: {\n altCopy: true, // false by default. Set to true to display the button in the context menu\n },\n callbacks: {\n altCopy: ({ dataset:dst, config:cfg }) =\u003e {\n // Convert the data into a tailor-made alt text you can copy to the clipboard\n }\n },\n buttonTitles: {\n altCopy: 'Copy alt text' // provide your translation for the button's tooltip\n }\n }\n));\n```\n\nA slot is available to customize the contents of the button:\n\n```html\n\u003cVueUiXy :dataset=\"dataset\" :config=\"config\"\u003e\n \u003ctemplate #optionAltCopy\u003e\n \u003cMyAccessibilityIcon /\u003e\n \u003c/template\u003e\n\u003c/VueUiXy\u003e\n```\n\n### opt-in cursor pointer\n\nStarting from v3.15.0, all clickable elements will have a default cursor.\nTo have a cursor pointer on these elements, you have to opt-in through the config:\n\n```js\nconst config = computed(() =\u003e ({\n useCursorPointer: true, // false by default\n}));\n```\n","funding_links":["https://github.com/sponsors/graphieros"],"categories":["Vue","Components \u0026 Libraries"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fvue-data-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Fvue-data-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fvue-data-ui/lists"}