A user-empowering data visualization Vue components library for eloquent data storytelling.
Available components
- VueUiAgePyramid
- VueUiCandlestick
- VueUiChestnut
- VueUiChord
- VueUiCirclePack
- VueUiDonutEvolution
- VueUiDonut
- VueUiDumbbell
- VueUiFlow
- VueUiFunnel
- VueUiGalaxy
- VueUiGauge
- VueUiHeatmap
- VueUiHistoryPlot
- VueUiMolecule
- VueUiMoodRadar
- VueUiNestedDonuts
- VueUiOnion
- VueUiParallelCoordinatePlot
- VueUiQuadrant
- VueUiQuickChart
- VueUiRadar
- VueUiRelationCircle
- VueUiRidgeline
- VueUiRings
- VueUiScatter
- VueUiStackbar
- VueUiStripPlot
- VueUiThermometer
- VueUiTiremarks
- VueUiTreemap
- VueUiHorizontalBar
- VueUiWaffle
- VueUiWheel
- VueUiWordCloud
- VueUiXyCanvas
- VueUiXy
- VueUiSparkHistogram
- VueUiSparkbar
- VueUiSparkgauge
- VueUiSparkline
- VueUiSparkStackbar
- VueUiSparkTrend
- VueUiGizmo
- VueUiBullet
- VueUiAccordion
- VueUiAnnotator
- VueUiCursor
- VueUiDashboard
- VueUiDigits
- VueUiIcon
- VueUiKpi
- VueUiMiniLoader
- VueUiSkeleton
- VueUiTimer
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:
506C
<script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>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>Note that the following utility components are not supported by the universal VueDataUi component and must be imported individually:
- Arrow
- VueUiIcon
- VueUiPattern
Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
Vue Data UI v3 does not contain breaking changes. However, some charts have their padding configs modified, which can lead to excessive padding with a v2 config.
-
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. -
config.debug(default: false) set to true to show warning messages during development, turn off for production. -
smart label resizing and auto-rotating features
-
more charts support responsive mode
-
config event callbacks
This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt
Charts with tooltips have a config option to customize tooltip contents:
customFormat: ({ seriesIndex, datapoint, series, config }) => {
return `<div>${ ... }</div>`;
}Data labels can be customized using the formatter config attribute (since v2.3.29 on all chart components):
// the formatter attribute is generally placed under label or dataLabel config attribute objects
const config = ref({
formatter: ({ value, config }) => {
return `formatted ${value}`;
}
})
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.
All charts expose a #legend slot except for:
- VueUiCirclePack
- VueUiDumbbell
- VueUiFlow
- VueUiFunnel
- VueUiHeatmap
- VueUiRelationCircle
- VueUiSparkHistogram
- VueUiSparkStackbar
- VueUiSparkbar
- VueUiSparkgauge
- VueUiSparkline
- VueUiThermometer
- VueUiTimer
- 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>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
- VueUiHistoryPlot
- VueUiMolecule
- VueUiNestedDonuts
- VueUiOnion
- VueUiParallelCoordinatePlot
- VueUiQuadrant
- VueUiQuickChart
- VueUiRadar
- VueUiRings
- VueUiScatter
- VueUiSparkStackbar
- VueUiStackbar
- VueUiTreemap
- VueUiHorizontalBar
- VueUiWordCloud
- VueUiXy *
- VueUiXyCanvas
- VueUiwaffle
- VueUiWorld
* VueUiXy slots specifically expose the following additional attributes:
{
...,
ba
BB54
rs,
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.
You can use the #watermark slot to include any watermark content with your own styling. This slot exposes the isPrinting boolean you can use to display the watermark only when producing a pdf or an image.
<VueUiDonut :config="config" :dataset="dataset">
<template #watermark="{ isPrinting }">
<div
v-if="isPrinting"
style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)"
>
WATERMARK
</div>
</template>
</VueUiDonut>Available for the following components:
- VueUiQuickChart (for line & bar types only)
- VueUiXy
- VueUiDonutEvolution
- VueUiCandlestick
- VueUiWordCloud
The config option zoom.useResetSlot must be set to true to use the slot.
<VueUiXy :config="config" :dataset="dataset">
<template #reset-action="{ reset }">
<button @click="reset()">RESET ZOOM</button>
</template>
</VueUiXy>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");All charts are set by default without a theme, and use the default color palette.
5 themes are available for all charts:
- zen
- hack
- concrete
- celebration (v2.4.70+)
- celebrationNight (v2.4.70+)
Any color provided in dataset props will override the colors used by the theme for datapoints.
To use a theme, set the theme attribute of the config prop, for example:
const donutConfig = ref({
theme: 'zen',
...
})Type definitions are available in the vue-data-ui.d.ts file in the dist/types directory.
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|---|---|---|---|---|---|---|
VueDataUi |
(depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|---|---|---|---|---|---|---|
VueUiQuickChart |
VueUiQuickChartDataset |
VueUiQuickChartConfig |
@selectDatapoint, @selectLegend, generatePdf, generateImage, toggleTooltip |
#legend, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background |
✅ | ✅ |
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|---|---|---|---|---|---|---|
VueUiSparkline |
VueUiSparklineDatasetItem[] |
VueUiSparklineConfig |
@selectDatapoint |
#svg, #before, #chart-background, #tooltip |
✅ | ✅ |
VueUiSparkbar |
VueUiSparkbarDatasetItem[] |
VueUiSparkbarConfig |
@selectDatapoint |
#data-label, #title |
❌ | ✅ |
VueUiSparkStackbar |
VueUiSparkStackbarDatasetItem[] |
VueUiSparkStackbarConfig |
@selectDatapoint |
#tooltip-before, #tooltip-after |
✅ | ✅ |
VueUiSparkHistogram |
VueUiSparkHistogramDatasetItem[] |
VueUiSparkHistogramConfig |
@selectDatapoint |
#chart-background |
❌ | ✅ |
VueUiSparkGauge |
VueUiSparkGaugeDataset |
VueUiSparkGaugeConfig |
❌ | #chart-background |
❌ | ✅ |
VueUiSparkTrend |
number[] |
VueUiSparkTrendConfig |
❌ | #chart-background |
❌ | ✅ |
VueUiGizmo |
VueUiGizmoDataset |
VueUiGizmoConfig |
❌ | ❌ | ❌ | ❌ |
VueUiBullet |
VueUiBulletDataset |
VueUiBulletConfig |
generatePdf, generateImg, getData, getImage |
#svg, #legend, #watermark, #chart-background |
❌ | ✅ |
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|---|---|---|---|---|---|---|
VueUiAgePyramid |
Array<Array<string / number>> |
VueUiSparklineConfig |
generatePdf, generateImage, generateCsv, toggleTable, toggleTooltip, getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiCandlestick |
Array<Array<string / number>> |
VueUiCandlestickConfig |
generatePdf, generateImage, generateCsv, toggleTable, toggleTooltip, getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background |
✅ | ✅ |
VueUiChestnut |
VueUiChestnutDatasetRoot[] |
VueUiChestnutConfig |
@selectRoot, @selectBranch, @selectNut, getData, generatePdf, generateCsv, generateImage, toggleTable, getImage |
#svg, #legend, #watermark, #chart-background |
❌ | ✅ |
VueUiChord |
VueUiChordDataset |
VueUiChordConfig |
@selectLegend, @selectGroup, @selectRibbon, getData, generatePdf, generateCsv, generateImage, toggleTable, getImage |
#svg, #legend, #watermark, #chart-background, #pattern |
❌ | ✅ |
VueUiCirclePack |
VueUiCirclePackDatasetItem[] |
VueUiCirclePackConfig |
@selectDatapoint, getData, generatePdf, generateImage, generateCsv, toggleTable, getImage |
#svg, #legend, #watermark, #chart-background , #pattern, #zoom-label, #data-label |
✅ | ✅ |
VueUiDonutEvolution |
VueUiDonutEvolutionDatasetItem[] |
VueUiDonutEvolutionConfig |
@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable , getImage |
#svg, #legend, #reset-action, #watermark, #chart-background |
❌ | ✅ |
VueUiDonut |
VueUiDonutDatasetItem[] |
VueUiDonutConfig |
@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage |
#svg, #legend, #dataLabel, #tooltip-before, #tooltip-after, #plot-comment, #watermark, #chart-background, #pattern |
✅ | ✅ |
VueUiDumbbell |
VueUiDumbbellDataset[] |
VueUiDumbbellConfig |
getData, generatePdf, generateCsv, generateImage, toggleTable, getImage |
#svg, #legend, #watermark, #chart-background |
❌ | ✅ |
VueUiFlow |
VueUiFlowDatasetItem[] |
VueUiFlowConfig |
getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage |
#svg, #legend, #watermark, #chart-background, #tooltip-before, #tooltip-after, |
✅ | ✅ |
VueUiFunnel |
VueUiFunnelDatasetItem[] |
VueUiFunnelConfig |
getData, generatePdf, generateCsv, generateImage, toggleTable, getImage |
#svg, #watermark, #chart-background |
❌ | ✅ |
VueUiGalaxy |
VueUiGalaxyDatasetItem[] |
VueUiGalaxyConfig |
@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage |
#svg, #legend,#tooltip-before, #tooltip-after, #chart-background |
✅ | ✅ |
VueUiGauge |
VueUiGaugeDataset |
VueUiGaugeConfig |
generatePdf, generateImage, getImage |
#svg, #legend, #watermark, #chart-background, #pattern |
❌ | ✅ |
VueUiHeatmap |
VueUiHeatmapDatasetItem[] |
VueUiHeatmapConfig |
@selectDatapoint, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage |
#svg, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiHistoryPlot |
VueUiHistoryPlotDatasetItem[] |
VueUiHistoryPlotConfig |
@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiMolecule |
VueUiMoleculeDatasetNode[] |
VueUiMoleculeConfig |
@selectNode, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage |
#node, #svg, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiMoodRadar |
VueUiMoodRadarDataset |
VueUiMoodRadarConfig |
getData, generatePdf, generateCsv, generateImage, toggleTable , getImage |
#svg, #legend, #watermark, #chart-background |
❌ | ✅ |
VueUiNestedDonuts |
VueUiNestedDonutsDatasetItem[] |
VueUiNestedDonutsConfig |
@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiOnion |
VueUiOnionDatasetItem[] |
VueUiOnionConfig |
@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiParallelCoordinatePlot |
VueUiParallelCoordinatePlotDatasetItem[] |
VueUiParallelCoordinatePlotConfig |
@selectLegend, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #plot-comment, #watermark, #chart-background |
✅ | ✅ |
VueUiQuadrant |
VueUiQuadrantDatasetItem[] |
VueUiQuadrantConfig |
@selectLegend, @selectPlot, @selectSide, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiRadar |
VueUiRadarDataset |
VueUiRadarConfig |
@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiRidgeline |
VueUiRidgelineDatasetItem[] |
VueUiRidgelineConfig |
@selectLegend, @selectX, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable , getImage |
#svg, #legend, #time-label,#watermark, #chart-background, #pattern |
❌ | ✅ |
VueUiRings |
VueUiRingsDatasetItem[] |
VueUiRingsConfig |
@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background, #pattern |
✅ | ✅ |
VueUiScatter |
VueUiScatterDatasetItem[] |
VueUiScatterConfig |
getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiStackbar |
VueUiStackbarDatasetItem[] |
VueUiStackbarConfig |
@selectLegend, @selectDatapoint, @selectTimeLabel, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage |
#svg, #legend, #time-label, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background, #pattern |
✅ | ✅ |
VueUiStripPlot |
VueUiStripPlotDataset[] |
VueUiStripPlotConfig |
@selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background |
✅ | ✅ |
VueUiThermometer |
VueUiThermometerDataset |
VueUiThermometerConfig |
generatePdf, generateImage , getImage |
#svg, #watermark, #chart-background |
❌ | ✅ |
VueUiTiremarks |
VueUiTiremarksDataset |
VueUiTiremarksConfig |
generatePdf, generateImage , getImage |
#svg, #legend, #watermark, #chart-background |
❌ | ✅ |
VueUiTreemap |
VueUiTreemapDatasetItem[] |
VueUiTreemapConfig |
@selectLegend, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage |
#svg, #rect, #legend, #tooltip-before, #tooltip-after, #watermark, #breadcrumb-label, #breadcrumb-arrow |
✅ | ✅ |
VueUiHorizontalBar |
VueUiHorizontalBarDatasetItem[] |
VueUiWheelConfig |
@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleSort, toggleTooltip , getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background, #pattern |
✅ | ✅ |
VueUiWaffle |
VueUiWaffleDatasetItem[] |
VueUiWaffleConfig |
@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage |
#svg, #legend, #tooltip-before, #tooltip-after, #watermark, #pattern |
✅ | ✅ |
VueUiWheel |
VueUiWheelDataset |
VueUiWheelConfig |
generatePdf, generateImage , getImage |
#svg, #watermark, #chart-background |
❌ | ✅ |
VueUiWordCloud |
VueUiWordCloudDatasetItem[] / string |
VueUiWordCloudConfig |
getData, generatePdf, generateImage, generateCsv, toggleTooltip , getImage |
#svg, #reset-action, #watermark, #tooltip-before, #tooltip-after, #chart-background |
✅ | ✅ |
VueUiXyCanvas |
VueUiXyCanvasDatasetItem[] |
VueUiXyCanvasConfig |
@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip , getImage |
#legend, #tooltip-before, #tooltip-after, #reset-action, #watermark |
✅ | ✅ |
VueUiXy |
VueUiXyDatasetItem[] |
VueUiXyConfig |
@selectLegend, @selectX, @selectTimeLabel, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip , getImage |
#svg, #legend, #time-label, #tooltip-before, #tooltip-after, #reset-action, #plot-comment,#watermark, #chart-background, #pattern, #area-gradient, #bar-gradient |
✅ | ✅ |
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|---|---|---|---|---|---|---|
VueUi3dBar |
VueUi3dBarDataset |
VueUi3dBarConfig |
generatePdf, generateImage, toggleTable, getImage |
#svg, #watermark, #chart-background |
❌ | ✅ |
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|---|---|---|---|---|---|---|
VueUiWorld |
VueUiWorldDataset |
VueUiWorldConfig |
getData, generatePdf, generateImage, toggleTable, toggleTooltip, toggleAnnotator, getImage |
#svg, #watermark, #pattern, #chart-background |
✅ | ❌ |
| Name | dataset type | config type | emits / exposed methods | slots | themes |
|---|---|---|---|---|---|
VueUiTable |
VueUiTableDataset |
VueUiTableConfig |
❌ | ❌ | ❌ |
VueUiTableHeatmap |
VueUiTableHeatmapDatasetItem[] |
VueUiTableHeatmapConfig |
generatePdf, generateCsv, generateImage |
#caption, #rowTitle, #cell, #sum, #average, #median |
✅ |
VueUiTableSparkline |
VueUiTableSparklineDatasetItem[] |
VueUiTableSparklineConfig |
generatePdf, generateCsv, generateImage |
❌ | ✅ |
VueUiCarouselTable |
VueUiCarouselTableDataset |
VueUiCarouselTableConfig |
generatePdf, generateImage, generateCsv, toggleAnimation, pauseAnimation, resumeAnimation |
#caption, #th, #td |
❌ |
| Name | dataset type | config type | emits / exposed methods | slots |
|---|---|---|---|---|
VueUiRating |
VueUiRatingDataset |
VueUiRatingConfig |
@rate, getData,toggleReadonly |
#layer-under, #layer-above |
VueUiSmiley |
VueUiRatingDataset |
VueUiSmileyConfig |
@rate, getData,toggleReadonly |
| Name | dataset type | config type | emits / exposed methods | slots |
|---|---|---|---|---|
VueUiAccordion |
❌ | VueUiAccordionConfig |
❌ | #arrow, #title, #content |
VueUiAnnotator |
VueUiAnnotatorDataset |
VueUiAnnotatorConfig |
@toggleOpenState, @saveAnnotations |
❌ |
VueUiCursor |
❌ | VueUiCursorConfig |
❌ | ❌ |
VueUiDashboard |
VueUiDashboardElement[] |
VueUiDashboardConfig |
@change |
#content, #top, #bottom |
VueUiDigits |
number |
VueUiDigits
506C
Config |
❌ | ❌ |
VueUiKpi |
number |
VueUiKpiConfig |
❌ | #title, #value, #comment-before, #comment-after |
VueUiMiniLoader |
❌ | VueUiMiniLoaderConfig |
❌ | ❌ |
VueUiSkeleton |
❌ | VueUiSkeletonConfig |
❌ | ❌ |
VueUiTimer |
❌ | VueUiTimerConfig |
@start, @pause, @reset, @restart, @lap |
#time, #controls, #laps, #chart-background |
VueUiIcon |
see below |
Tailor made icons are available through the VueUiIcon component:
<VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />All names of available icons are available in the vue-data-ui.d.ts file under the VueUiIconName type.
User options menu is accessible in the burger menu located on the top right of charts, and visible by default. To hide user options menu, set config.userOptions.show to false:
const config = ref({
userOptions: {
show: false
},
...
})User options menu can be set to appear only when hovering the component:
const config = ref({
userOptions: {
show: true,
showOnChartHover: true, // Default: false
keepStateOnChartLeave: true, // Set to false to always close the menu when hovering out of the chart
},
});Predefined actions in user options menu depend on the type of chart. Some charts have more or less actions available. Action buttons contain an predefined icons by default.
To hide a given action, set the userOption.buttons, for example:
const config = ref({
userOptions: {
show: true,
buttons: {
pdf: false,
fullscreen: false,
// all other actions will be visible by default (list of all actions below)
},
},
});You can use slots to override the content of action buttons. What happens when the button is clicked is taken care of by the component, except for the optionFullscreen slot.
<VueUiDonut :config="config" :dataset="dataset">
<template #optionPdf> GENERATE PDF </template>
<!-- This is the only action where scoped content is provided -->
<template template #optionFullscreen="{ isFullscreen, toggleFullscreen }">
<div @click="toggleFullscreen(isFullscreen ? 'out' : 'in')">
TOGGLE FULLSCREEN
</div>
</template>
</VueUiDonut>You can pass a callback trhough the config, for each button, to override the default behavior:
const config = {
userOptions: {
callbacks: {
pdf: ({ chartElement, imageUri, base64 }) => {
console.log(chartElement);
},
img: ({ chartElement, imageUri, base64 }) => {
console.log(base64);
},
csv: (csvStr: string) => {
console.log(csvStr);
},
// the other atributes also have the same names as the buttons
},
},
};User options actions available per chart:
| Chart name | User options actions slot names |
|---|---|
| VueUi3dBar | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiAgePyramid | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiBullet | optionPdf, optionImg, optionFullscreen, optionAnnotator |
| VueUiCandlestick | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiCarouselTable | optionPdf, optionImg, optionCsv, optionAnimation, optionFullscreen |
| VueUiChestnut | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiChord | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiCirclePack | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiDonut | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator |
| VueUiDonutEvolution | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiDumbbell | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiFlow | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiFunnel | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiGalaxy | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiGauge | optionPdf, optionImg, optionFullscreen, optionAnnotator |
| VueUiHeatmap | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiHistoryPlot | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiMolecule | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator |
| VueUiMoodRadar | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiNestedDonuts | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator |
| VueUiOnion | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiParallelCoordinatePlot | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator |
| VueUiQuadrant | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator |
| VueUiQuickChart | optionTooltip, optionPdf, optionImg, optionFullscreen, optionAnnotator |
| VueUiRadar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiRelationCircle | optionPdf, optionImg, optionFullscreen, optionAnnotator |
| VueUiRidgeline | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiRings | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiScatter | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiSparkHistogram | (no user options menu) |
| VueUiSparkStackbar | (no user options menu) |
| VueUiSparkTrend | (no user options menu) |
| VueUiSparkbar | (no user options menu) |
| VueUiSparkgauge | (no user options menu) |
| VueUiSparkline | (no user options menu) |
| VueUiStackbar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator |
| VueUiStripPlot | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator |
| VueUiTableHeatmap | optionPdf, optionImg, optionCsv, optionFullscreen |
| VueUiTableSparkline | optionPdf, optionImg, optionCsv, optionFullscreen |
| VueUiThermometer | optionPdf, optionImg, optionFullscreen, optionAnnotator |
| VueUiTiremarks | optionPdf, optionImg, optionFullscreen, optionAnnotator |
| VueUiTreemap | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiHorizontalBar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator |
| VueUiWaffle | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiWheel | optionPdf, optionImg, optionFullscreen, optionAnnotator |
| VueUiWordCloud | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiWorld | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
| VueUiXy | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator |
| VueUiXyCanvas | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator |
User options menu icon can be customized using the #menuIcon slot:
<template #menuIcon="{ isOpen, color }">
<div>{{ isOpen ? 'close' : 'open' }}</div>
</template>It is possible to provide a custom palette in the config prop through config.customPalette (string[]) for the follow 6B28 ing components:
- VueUi3dBar
- VueUiChestnut
- VueUiChord
- VueUiCirclePack
- VueUiDonut
- VueUiDonutEvolution
- VueUiFlow
- VueUiGalaxy
- VueUiGauge
- VueUiHistoryPlot
- VueUiMolecule
- VueUiNestedDonuts
- VueUiOnion
- VueUiParallelCoordinatePlot
- VueUiQuadrant
- VueUiQuickChart
- VueUiRadar
- VueUiRelationCircle
- VueUiRidgeline
- VueUiRings
- VueUiScatter
- VueUiSparkStackbar
- VueUiSparkbar
- VueUiStackbar
- VueUiStripPlot
- VueUiTableSparkline
- VueUiThermometer
- VueUiTreemap
- VueUiHorizontalBar
- VueUiWaffle
- VueUiWordCloud
- VueUiWorld
- VueUiXy
- VueUiXyCanvas
If the array of colors provided in customPalette is too small for the dataset, remaining colors will be computed from the default internal palette. Accepted color formats: HEX, RGB, HSL, named colors.
By default, all charts will scale to the width of their container. However the folowing charts can be made fully responsive, making them better to use in resizable containers:
| Component | Responsive feature implemented |
|---|---|
| VueUi3dBar | ✅ |
| VueUiAgePyramid | ✅ |
| VueUiAgePyramid | ✅ |
| VueUiBullet | ✅ |
| VueUiCarouselTable | - |
| VueUiChestnut | - |
| VueUiChord | ✅ |
| VueUiCirclePack | ✅ (built-in) |
| VueUiDonut | ✅ |
| VueUiDonutEvolution | ✅ |
| VueUiDumbbell | ✅ |
| VueUiFlow | ✅ |
| VueUiFunnel | ✅ |
| VueUiGalaxy | ✅ |
| VueUiGauge | ✅ |
| VueUiHeatmap | ✅ |
| VueUiHistoryPlot | ✅ |
| VueUiMolecule | - |
| VueUiMoodRadar | ✅ |
| VueUiNestedDonuts | ✅ |
| VueUiOnion | ✅ |
| VueUiParallelCoordinatePlot | ✅ |
| VueUiQuadrant | ✅ |
| VueUiQuickChart | ✅ |
| VueUiRadar | ✅ |
| VueUiRelationCircle | ✅ |
| VueUiRidgeline | ✅ |
| VueUiRings | ✅ |
| VueUiScatter | ✅ |
| VueUiSparkHistogram | ✅ |
| VueUiSparkStackbar | - |
| VueUiSparkTrend | ✅ |
| VueUiSparkbar | - |
| VueUiSparkgauge | - |
| VueUiSparkline | ✅ |
| VueUiStackbar | ✅ |
| VueUiStripPlot | ✅ |
| VueUiTableHeatmap | - |
| VueUiTableSparkline | - |
| VueUiThermometer | ✅ |
| VueUiTimer | ✅ |
| VueUiTiremarks | ✅ |
| VueUiTreemap | ✅ |
| VueUiHorizontalBar | ✅ |
| VueUiWaffle | ✅ |
| VueUiWheel | ✅ |
| VueUiWordCloud | ✅ |
| VueUiWorld | - |
| VueUiXy | ✅ |
| VueUiXyCanvas | ✅ |
To activate responsiveness, set the config.responsive attribute to true:
const config = ref({
responsive: true,
// rest of your config
});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.
Very large datasets (> 5k or > 10k datapoints) will cause the browsers rendering engines to slow down, caused by too many SVG DOM elements to render. The 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:
| Component | Default Threshold | Remark |
|---|---|---|
| VueUiXy | 1095 | |
| VueUiXyCanvas | 10000 | Since this chart uses canvas, threhsold can be set higher |
| VueUiQuadrant | 1095 | |
| VueUiScatter | 1095 | |
| VueUiSparkline | 1095 | |
| VueUiSparkTrend | 1095 |
The downsample threshold for each component can be set in the config prop passed to components:
const config = ref({
downsample: {
threshold: 500,
},
...// rest of your config
})A #chart-background slot is available on most charts to customize their background, to display a gradient, an image, etc. The content placed inside this slot has pointer-events set to none, so it does not interfere with the components' interactivity.
<VueUiXy :config="config" :dataset="dataset">
<template #chart-background>
<div
style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"
/>
</template>
</VueUiXy>The following components do not support this slot, because it would not make sense:
- VueUiCarouselTable
- VueUiGizmo
- VueUiIcon
- VueUiKpi
- VueUiRating
- VueUiSmiley
- VueUiSparkStackbar
- VueUiSparkbar
- VueUiTableHeatmap
- VueUiTableSparkline
- VueUiTreemap
- VueUiWaffle
- VueUiXyCanvas
A #pattern slot is available on some components to apply custom patterns on datapoints for further customization. The slot exposes the seriesIndex, and a patternId which must be used on the pattern element to be recognized. A pattern element must be used inside this slot. It will be injected inside a defs element of the component.
<VueUiDonut :config="config" :dataset="dataset">
<template #pattern="{ seriesIndex, patternId }">
<!-- Apply a patattern on the first datapoint only -->
<pattern
v-if="seriesIndex === 0"
:id="patternId"
viewBox="0,0,10,10"
width="10%"
height="10%"
>
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
</pattern>
</template>
</VueUiDonut>The #pattern slot is available on the following components:
- VueUiChord
- VueUiCirclePack
- VueUiDonut
- VueUiGauge
- VueUiRidgeline
- VueUiRings
- VueUiStackbar
- VueUiHorizontalBar
- VueUiWaffle
- VueUiWorld
- VueUiXy
A set of 12 readymade patterns are available through the VueUiPattern component:
import { VueUiPattern } from "vue-data-ui";<VueUiDonut :dataset="dataset" :config="config">
<template #pattern="{ seriesIndex, patternId }">
<VueUiPattern :id="patternId" name="bubbles" v-if="seriesIndex === 0" />
<VueUiPattern :id="patternId" name="squares" v-if="seriesIndex === 1" />
</template>
</VueUiDonut>VueUiPattern accepts the following props:
- id: string, required. Pass the patternId provided by the #pattern slot
- name: string, required. The name of the pattern to use
- fill: string, optional. The backgroundColor of the pattern. Transparent by default to show the datapoint base color
- stroke: string, optional. Default: #2D353C
- strokeWidth: number, optional. Default: 1
- scale: number, optional. Default: 1
List of available patterns:
| pattern name |
|---|
| bubbles |
| flooring |
| grid |
| hexagon-diamond |
| hexagon-flooring |
| hexagon-grid |
| maze |
| redrum |
| scales |
| squares |
| wave |
| zigzag |
A set of uility functions is available:
import {
abbreviate,
darkenColor,
lightenColor,
shiftColorHue,
createTSpans,
getCumulativeAverage,
getCumulativeMedian,
} from "vue-data-ui";import { abbreviate } from "vue-data-ui";
const text = "lorem ipsum dolor sit amet";
const abbreviated = abbreviate({
source: text,
length: 5,
}); // Result: LIDSAimport { darkenColor } from "vue-data-ui";
const color = "#FF0000";
const darkened = darkenColor(color, 0.5); // Result: #800000ffimport { lightenColor } from "vue-data-ui";
const color = "#FF0000";
const lightened = lightenColor(color, 0.5); // Result: #ff8080ffimport { shiftColorHue } from "vue-data-ui";
// Color format can be HEX (with or without alpha channel), RGB, RGBA, or named color
const color = "#FF0000";
const shifted = shiftColorHue(color, 0.1); // Result: #ff9900ffimport { createTSpans } from "vue-data-ui";
const textContent = createTSpans({
content: "This is an example of multiline text",
fontSize: 16,
fill: "#1A1A1A",
maxWords: 3,
x: 10,
y: 20,
});<!-- 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 -->
<text
:x="10"
:y="20"
fill="#1A1A1A"
:font-size="16"
text-anchor="middle"
v-html="textContent"
/>import { getCumulativeAverage } from "vue-data-ui";
// simple usage
const arr = [0, 1, 2, 3, 4];
const cumulativeAvg = getCumulativeAverage({ values: arr });
// Ignore invalid values entirely
const arrWithInvalid = [1, null, 2, Infinity, NaN, undefined];
const cumulativeAvgNoInvalid = getCumulativeAverage({
values: arrWithInvalid,
config: {
keepInvalid: false,
},
});
// Convert invalid values to zero
const cumulativeAvgZeroed = getCumulativeAverage({
values: arrWithInvalid,
config: {
convertInvalidToZero: true,
},
});import { getCumulativeMedian } from "vue-data-ui";
// simple usage
const arr = [0, 1, 2, 3, 4];
const cumulativeMed = getCumulativeMedian({ values: arr });
// Ignore invalid values entirely
const arrWithInvalid = [1, null, 2, Infinity, NaN, undefined];
const cumulativeMedNoInvalid = getCumulativeMedian({
values: arrWithInvalid,
config: {
keepInvalid: false,
},
});
// Convert invalid values to zero
const cumulativeMedZeroed = getCumulativeMedian({
values: arrWithInvalid,
config: {
convertInvalidToZero: true,
},
});import { mergeConfigs, getVueDataUiConfig } from "vue-data-ui";
const defaultConfig = getVueDataUiConfig("vue_ui_xy");
// Create a full config with user overrides
const merged = mergeConfigs({
defaultConfig,
userConfig: {
chart: {
backgroundColor: "#FF0000",
},
},
});Some components will display labels on mutliple lines when the provided text contains a line break. (example: "I contain\na line break"). Below is a table of the places where such line breaks can be used:
| Component | Label displayed | Where to use line breaks |
|---|---|---|
| VueUiXy | Time labels (x axis) | config.chart.grid.labels.xAxisLabels.values |
| VueUiDonutEvolution | Time labels (x axis) | config.style.chart.layout.grid.xAxis.dataLabels.values |
| VueUiHistoryPlot | Plot labels | dataset names |
| VueUiParallelCoordinatePlot | Axis labels | config.style.chart.yAxis.labels.axisNames |
| VueUiQuadrant | Plot labels | dataset names |
| VueUiQuickChart | Time labels (x axis) | config.xyPeriods |
| VueUiRidgeline | Time labels (x axis) | config.style.chart.xAxis.labels.values |
| VueUiStackbar | Time labels (x axis) | config.style.chart.grid.x.timeLabels.values |
| VueUiStripPlot | x axis labels | dataset names |
This package requires jspdf as a peer dependency. Please install it in your project if you intend on using the PDF printing feature.
A 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.
- Automatic reactivity: Every nested property becomes a
Ref, with automatic getters/setters that keep your source object in sync. - Flat API surface: Access or update any nested field by its dot‑delimited path, without writing deep destructuring or
refplumbing. - Dynamic path support: New paths added at runtime are discovered automatically (and proxied), so you never lose reactivity when mutating the structure.
import { useObjectBindings, getVueDataUiConfig } from "vue-data-ui";
const config = ref(getVueDataUiConfig("vue_ui_donut")); // or your custom config for this component
const bindings = useObjectBindings(config);
// Now `bindings` has computed refs for each leaf path:
// bindings["style.chart.backgroundColor"] → Ref<string>
// bindings["style.chart.color"] → Ref<string>
// bindings["customPalette"] → Ref<boolean>
// by default, arrays are skipped:
// no "customPalette.0", unless you disable skipArraysYou can then use these in your template:
<template>
<div>
<input
type="color"
v-model="bindings['style.chart.backgroundColor'].value"
/>
</div>
</template>Most chart components expose the following methods:
const componentRef = ref(null);
onMounted(async () => {
if (componentRef) {
const data = await componentRef.value.getData();
console.log(data);
}
});const componentRef = ref(null);
onMounted(async () => {
if (componentRef) {
const { imgUri, base64, title, width, height, aspectRatio } =
await componentRef.value.getImage({ scale: 2 }); // optional scale, defaults to 2, increase for better image quality
console.log(imageUri);
}
});