{"id":12449,"library":"vue-data-ui","title":"Vue Data UI Components Library","description":"Vue-Data-UI is a comprehensive data visualization library providing a rich collection of user-empowering Vue 3 components for data storytelling. Currently at version 3.17.13, the library demonstrates an active development cadence with frequent patch releases addressing bug fixes, performance improvements, and the addition of new configuration options and components. It differentiates itself through a wide array of specialized chart types, including unique visualizations like Age Pyramids, Candlesticks, Chord diagrams, and various tree/network representations, catering to diverse data analysis needs. Its focus is on providing interactive, configurable components designed to facilitate eloquent data storytelling within Vue 3 applications, shipping with full TypeScript type definitions to enhance developer experience.","status":"active","version":"3.17.13","language":"javascript","source_language":"en","source_url":"https://github.com/graphieros/vue-data-ui","tags":["javascript","3d bar","Vue","accelerometer","age pyramid","annotator","candlestick","chart","cluster","typescript"],"install":[{"cmd":"npm install vue-data-ui","lang":"bash","label":"npm"},{"cmd":"yarn add vue-data-ui","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-data-ui","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for PDF export functionality available in some chart components.","package":"jspdf","optional":false},{"reason":"Core peer dependency for Vue 3 component integration and rendering.","package":"vue","optional":false}],"imports":[{"note":"All chart components are named exports. Type definitions are included for TypeScript projects.","wrong":"import VueUiScatter from 'vue-data-ui'","symbol":"VueUiScatter","correct":"import { VueUiScatter } from 'vue-data-ui'"},{"note":"This library is primarily designed for ES Module consumption in modern Vue 3 applications; CommonJS require() is not the idiomatic way.","wrong":"const VueUiTreemap = require('vue-data-ui')","symbol":"VueUiTreemap","correct":"import { VueUiTreemap } from 'vue-data-ui'"},{"note":"For optimal tree-shaking, import only the specific components you intend to use.","symbol":"VueUiAgePyramid","correct":"import { VueUiAgePyramid } from 'vue-data-ui'"}],"quickstart":{"code":"<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { VueUiScatter } from 'vue-data-ui';\nimport type { ChartConfig, ChartDataset } from 'vue-data-ui'; // Import types for better DX\n\nconst dataset = ref<ChartDataset['VueUiScatter']>([ // Dataset type example\n  { name: 'Category A', series: [{ name: 'Item 1', value: 10, x: 1, y: 5 }, { name: 'Item 2', value: 15, x: 2, y: 7 }] },\n  { name: 'Category B', series: [{ name: 'Item 3', value: 20, x: 3, y: 12 }, { name: 'Item 4', value: 25, x: 4, y: 10 }] }\n]);\n\nconst config = computed<ChartConfig['VueUiScatter']>(() => ({\n  style: {\n    chart: {\n      backgroundColor: 'transparent'\n    },\n    layout: {\n      plots: {\n        hoverRadiusRatio: 2,\n        opacityNotSelected: 0.6\n      }\n    },\n    legend: {\n      show: true\n    }\n  },\n  title: {\n    text: 'My Scatter Plot',\n    fontFamily: 'Inter',\n    fontSize: 18,\n    color: '#333'\n  },\n  zoomEnabled: true\n}));\n</script>\n\n<template>\n  <div style=\"width: 100%; height: 500px;\">\n    <VueUiScatter :dataset=\"dataset\" :config=\"config\" />\n  </div>\n</template>\n","lang":"typescript","description":"Demonstrates how to import and render a VueUiScatter component with a basic dataset and configuration in a Vue 3 application, including TypeScript types."},"warnings":[{"fix":"Ensure that the DOM environment where the component is rendered (especially in tests) provides a valid `<Teleport>` target (e.g., `body` or a specific element). You may need to mock `<Teleport>` in isolated unit tests if the target is not readily available.","message":"When using components with disabled legends, particularly in certain test environments, you might encounter issues related to Vue's `<Teleport>` component failing to find its target.","severity":"gotcha","affected_versions":">=3.17.11"},{"fix":"Always refer to the official documentation for the specific component's `config` and `dataset` types and structure. Leverage TypeScript for compile-time validation of your configuration objects.","message":"The library heavily relies on configuration objects for customization. Incorrectly structured or missing properties within these objects can lead to charts not rendering or behaving unexpectedly without clear console errors specific to the library's internal logic.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Inspect the `tooltip` object by adding `<pre>{{ JSON.stringify(tooltip, null, 2) }}</pre>` inside your slot template to understand its full structure before implementing custom formatting.","message":"When customizing tooltips via the new `#tooltip` slot, ensure you correctly access the exposed `tooltip` object properties (e.g., `datapoint`, `timeLabel`). Logging the full exposed object is recommended for discovery.","severity":"gotcha","affected_versions":">=3.17.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that the root element or the specific target for `<Teleport>` (e.g., a `div` with a specific ID) is present in your application's `index.html` or mounted component tree before the Vue component initializes. In testing, ensure your testing utility renders a complete DOM or mock the `<Teleport>` component.","cause":"A component using `<Teleport>` (often for elements like legends or tooltips) failed to find its intended target element in the DOM upon mounting.","error":"Failed to locate Teleport target\nInvalid Teleport target on mount\nUnhandled error during execution of component update"},{"fix":"Ensure all required props, especially `dataset` and `config`, are passed to the component and strictly adhere to the types defined in the library's documentation (or imported `ChartDataset` and `ChartConfig` types if using TypeScript).","cause":"TypeScript error indicating that a required prop (e.g., `dataset` or `config`) was not provided to a Vue Data UI component, or its type signature did not match the component's expectations.","error":"Property 'dataset' is missing in type '{ config: Ref<ComputedRef<...>>; }' but required in type 'Readonly<__VLS_TypeProps<__VLS_WithDefaults<typeof __VLS_internalComponent, { config: {}; dataset: { name: string; series: { name: string; values: number[]; }[]; }; }>>>'."}],"ecosystem":"npm"}