vue-data-ui

npm GitHub issues NPM npm

Interactive documentation

A user-empowering data visualization Vue components library.

Available components:

Charts

Mini charts

3d

VueUi3dBar

Tables

Rating

Utilities

Installation

npm i vue-data-ui

You can declare components globally in your main.js:

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

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

const app = createApp(App);

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

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

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

Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using:

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

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

</script>

<template>

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

</template>

Typescript

Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.

Nuxt

This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt

Customizable tooltips

Charts with tooltips have a config option to customize tooltip contents:


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

Slots

Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).

Config

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

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

const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");