vue-data-ui

vue-data-ui

Interactive documentation

A user-empowering data visualization Vue components library for eloquent data storytelling.

Available components

Charts

• VueUiAgePyramid
• VueUiCandlestick
• VueUiChestnut
• VueUiDonutEvolution
• VueUiDonut
• VueUiDumbbell
• VueUiGalaxy
• VueUiGauge
• VueUiHeatmap
• VueUiMolecule
• VueUiMoodRadar
• VueUiNestedDonuts
• VueUiOnion
• VueUiQuadrant
• VueUiQuickChart
• VueUiRadar
• VueUiRelationCircle
• VueUiRings
• VueUiScatter
• VueUiStripPlot
• VueUiThermometer
• VueUiTiremarks
• VueUiTreemap
• VueUiVerticalBar
• VueUiWaffle
• VueUiWheel
• VueUiXy

Mini charts

• VueUiSparkHistogram
• VueUiSparkbar
• VueUiSparkgauge
• VueUiSparkline
• VueUiSparkstackbar
• VueUiSparkTrend

3d

• VueUi3dBar

Tables

• VueUiTableHeatmap
• VueUiTableSparkline
• VueUiTable

Rating

• VueUiRating
• VueUiSmiley

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
• VueUiDumbbell

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
• VueUiQuickChart
• 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");

Available components : details

Type definitions are available in the vue-data-ui.d.ts file in the dist/types directory.

Universal component

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip
VueDataUi	(depends on component)	(depends on component)	(depends on component)	(depends on component)	(depends on component)

Quick chart

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
VueUiQuickChart	VueUiQuickChartDataset	VueUiQuickChartConfig	@selectDatapoint, @selectLegend, generatePdf, generateImage	#legend, #tooltip-before, #tooltip-after	✅

Mini charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip
VueUiSparkline	VueUiSparklineDatasetItem[]	VueUiSparklineConfig	@selectDatapoint	#svg	❌
VueUiSparkbar	VueUiSparkbarDatasetItem[]	VueUiSparkbarConfig	@selectDatapoint	❌	❌
VueUiSparkStackbar	VueUiSparkStackbarDatasetItem[]	VueUiSparkStackbarConfig	@selectDatapoint	❌	❌
VueUiSparkHistogram	VueUiSparkHistogramDatasetItem[]	VueUiSparkHistogramConfig	@selectDatapoint	❌	❌
VueUiSparkGauge	VueUiSparkGaugeDataset	VueUiSparkGaugeConfig	❌	❌	❌
VueUiSparkTrend	number[]	VueUiSparkTrendConfig	❌	❌	❌

Charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip
VueUiAgePyramid	Array<Array<string / number>>	VueUiSparklineConfig	generatePdf, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiCandlestick	Array<Array<string / number>>	VueUiCandlestickConfig	generatePdf, generateImage, generateCsv	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiChestnut	VueUiChestnutDatasetRoot[]	VueUiChestnutConfig	@selectRoot, @selectBranch, @selectNut, getData, generatePdf, generateCsv, generateImage	#svg, #legend	❌
VueUiDonut	VueUiDonutDatasetItem[]	VueUiDonutConfig	@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #dataLabel, #tooltip-before, #tooltip-after	✅
VueUiDonutEvolution	VueUiDonutEvolutionDatasetItem[]	VueUiDonutEvolutionConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend,	❌
VueUiDumbbell	VueUiDumbbellDataset[]	VueUiDumbbellConfig	getData, generatePdf, generateCsv, generateImage	#svg, #legend,	❌
VueUiGalaxy	VueUiGalaxyDatasetItem[]	VueUiGalaxyConfig	@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend,#tooltip-before, #tooltip-after	✅
VueUiGauge	VueUiGaugeDataset	VueUiGaugeConfig	generatePdf, generateImage	#svg, #legend,	❌
VueUiHeatmap	VueUiHeatmapDatasetItem[]	VueUiHeatmapConfig	generatePdf, generateCsv, generateImage	#svg, #tooltip-before, #tooltip-after	✅
VueUiMolecule	VueUiMoleculeDatasetNode[]	VueUiMoleculeConfig	getData, generatePdf, generateCsv, generateImage	#svg, #tooltip-before, #tooltip-after	✅
VueUiMoodRadar	VueUiMoodRadarDataset	VueUiMoodRadarConfig	getData, generatePdf, generateCsv, generateImage	#svg, #legend	❌
VueUiNestedDonuts	VueUiNestedDonutsDatasetItem[]	VueUiNestedDonutsConfig	@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiOnion	VueUiOnionDatasetItem[]	VueUiOnionConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiQuadrant	VueUiQuadrantDatasetItem[]	VueUiQuadrantConfig	@selectLegend, @selectPlot, @selectSide, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiRadar	VueUiRadarDataset	VueUiRadarConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiRings	VueUiRingsDatasetItem[]	VueUiRingsConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiScatter	VueUiScatterDatasetItem[]	VueUiScatterConfig	getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiStripPlot	VueUiStripPlotDataset[]	VueUiStripPlotConfig	@selectDatapoint, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiThermometer	VueUiThermometerDataset	VueUiThermometerConfig	generatePdf, generateImage	#svg	❌
VueUiTiremarks	VueUiTiremarksDataset	VueUiTiremarksConfig	generatePdf, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	❌
VueUiTreemap	VueUiTreemapDatasetItem[]	VueUiTreemapConfig	@selectLegend, @selectDatapoint, getData, generatePdf, generateCsv, generateImage	#svg, #rect, #legend, #tooltip-before, #tooltip-after	✅
VueUiVerticalBar	VueUiVerticalBarDatasetItem[]	VueUiWheelConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiWaffle	VueUiWaffleDatasetItem[]	VueUiWaffleConfig	@selectLegend, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅
VueUiWheel	VueUiWheelDataset	VueUiWheelConfig	generatePdf, generateImage	#svg	❌
VueUiXy	VueUiXyDatasetItem[]	VueUiXyConfig	@selectLegend, @selectX, getData, generatePdf, generateCsv, generateImage	#svg, #legend, #tooltip-before, #tooltip-after	✅

3D charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip
VueUi3dBar	VueUi3dBarDataset	VueUi3dBarConfig	generatePdf, generateImage	#svg	❌

Data tables

Name	dataset type	config type	emits / exposed methods	slots
VueUiTable	VueUiTableDataset	VueUiTableConfig	❌	❌
VueUiTableHeatmap	VueUiTableHeatmapDatasetItem[]	VueUiTableHeatmapConfig	generatePdf, generateCsv, generateImage	#caption, #rowTitle, #cell, #sum, #average, #median
VueUiTableSparkline	VueUiTableSparklineDatasetItem[]	VueUiTableSparklineConfig	generatePdf, generateCsv, generateImage	❌

Rating

Name	dataset type	config type	emits / exposed methods
VueUiRating	VueUiRatingDataset	VueUiRatingConfig	@rate, getData,toggleReadonly
VueUiSmiley	VueUiRatingDataset	VueUiSmileyConfig	@rate, getData,toggleReadonly

Utilities

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	❌
VueUiDigits	number	VueUiDigitsConfig	❌	❌
VueUiKpi	number	VueUiKpiConfig	❌	#title, #value, #comment-before, #comment-after
VueUiMiniLoader	❌	VueUiMiniLoaderConfig	❌	❌
VueUiScreenshot	❌	VueUiScreenshotConfig	@postImage, shoot, close	❌
VueUiSkeleton	❌	VueUiSkeletonConfig	❌	❌
VueUiIcon	see below

Icons

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.