vue-data-ui v2.1.19
vue-data-ui
A user-empowering data visualization Vue components library.
Available components:
Charts
- VueUiAgePyramid
- VueUiCandlestick
- VueUiChestnut
- VueUiDonutEvolution
- VueUiDonut
- VueUiGalaxy
- VueUiGauge
- VueUiHeatmap
- VueUiMolecule
- VueUiMoodRadar
- VueUiNestedDonuts
- VueUiOnion
- VueUiQuadrant
- VueUiQuickChart
- VueUiRadar
- VueUiRelationCircle
- VueUiRings
- VueUiScatter
- VueUiThermometer
- VueUiTiremarks
- VueUiTreemap
- VueUiVerticalBar
- VueUiWaffle
- VueUiWheel
- VueUiXy
Mini charts
3d
Tables
Rating
Utilities
- VueUiAccordion
- VueUiAnnotator
- VueUiCursor
- VueUiDashboard
- VueUiDigits
- VueUiIcon
- VueUiKpi
- VueUiMiniLoader
- VueUiScreenshot
- VueUiSkeleton
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. You can of course use the slots provided, if the target component has them.
<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
#svg slot
Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
<VueUiXy :dataset="dataset" :config="config">
<template #svg="{ svg }">
<foreignObject x="100" y="0" height="100" width="150">
<div>
This is a custom caption
</div>
</foreignObject>
</template>
</VueUiXy>
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:
- VueUiHeatmap
- VueUiRelationCircle
- VueUiSparkHistogram
- VueUiSparkStackbar
- VueUiSparkbar
- VueUiSparkgauge
- VueUiSparkline
- VueUiThermometer
- 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.
<VueUiDonut :config="config" :dataset="dataset">
<template #legend="{ legend }">
<div v-for="item in legend">
{{ legend.name }}
</div>
</template>
</VueUiDonut>
Tooltip #tooltip-before & #tooltip-after slots
Since v.2.0.57, it is possible to further customize tooltip contents with #tooltip-before and #tooltip-after slots. It is that easy to include an image, another chart or any other content into your tooltips. It's an alternative to the config option tooltip.customFormat, in case richer tooltip content is needed.
Both slots expose the following object:
{
datapoint,
seriesIndex,
series,
config,
}
The following charts bear these slots:
- VueUiAgePyramid
- VueUiCandlestick
- VueUiDonut
- VueUiGalaxy
- VueUiHeatmap
- VueUiMolecule
- VueUiNestedDonuts
- VueUiOnion
- VueUiQuadrant
- VueUiRadar
- VueUiRings
- VueUiScatter
- VueUiTreemap
- VueUiVerticalBar
- VueUiXy *
- VueUiwaffle
* VueUiXy slots specifically expose the following additional attributes:
{
...,
bars,
lines,
plots
}
<VueUiDonut :config="config" :dataset="dataset">
<template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
<div>
This content shows first
</div>
</template>
<template #tooltip-after={ datapoint, seriesIndex, dataset, config }">
<div>
This content shows last
</div>
</template>
</VueUiDonut>
The #tooltip-before & #tooltip-after slots also works when using the VueDataUi universal component, if the component it wraps supports them.
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");
16 hours ago
3 days ago
2 days ago
3 days ago
2 days ago
4 days ago
4 days ago
5 days ago
5 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
6 days ago
6 days ago
10 days ago
11 days ago
12 days ago
13 days ago
13 days ago
13 days ago
13 days ago
14 days ago
15 days ago
15 days ago
15 days ago
17 days ago
17 days ago
18 days ago
19 days ago
20 days ago
19 days ago
20 days ago
20 days ago
20 days ago
22 days ago
21 days ago
22 days ago
22 days ago
25 days ago
24 days ago
25 days ago
26 days ago
26 days ago
28 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
28 days ago
28 days ago
28 days ago
28 days ago
28 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago