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.
npm install vue-data-uiVerified import paths — ran on the pinned version, not inferred.
Demonstrates how to import and render a VueUiScatter component with a basic dataset and configuration in a Vue 3 application, including TypeScript types.
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.
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.
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.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.
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).