vue-data-ui

v3.14.7

Published

a day ago

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

vue-data-ui

Interactive documentation

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

Available components

Charts

Mini charts

3d

VueUi3dBar

Tables

Rating

Maps

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 into your files:

<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

Typescript

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

Vue Data UI version2 -> version3 migration

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.

Version 3 features

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

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>`;
}

Data formatting

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 the label or dataLabel config attribute objects

const config = ref({
  formatter: ({ value, config }) => {
    return `formatted ${value}`;
  }
})

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:

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>

Legend toggle

An opt-in config option displays a toggle button to hide/show all series, when the number of series > 2. This attribute can be found in the legend.selectAllToggle config section:

legend: {
  selectAllToggle: {
    show: false,
    backgroundColor: '#E1E5E8',
    color: '#2D353C'
  }
}

This legend toggle option is available for the following components:

VueUiDonut
VueUiDonutEvolution
VueUiGalaxy
VueUiHistoryPlot
VueUiHorizontalBar
VueUiNestedDonuts
VueUiOnion
VueUiParallelCoordinatePlot
VueUiQuadrant
VueUiQuickChart
VueUiRadar
VueUiRidgeline
VueUiRings
VueUiRings
VueUiScatter
VueUiSparkStackbar
VueUiStackbar
VueUiStackline
VueUiTreemap
VueUiWaffle
VueUiWorld
VueUiXy
VueUiXyCanvas

Tooltip #tooltip-before & #tooltip-after slots

Customize tooltip contents with #tooltip-before and #tooltip-after slots, to include an image, another chart or any other rich 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
VueUiCirclePack
VueUiDonut
VueUiGalaxy
VueUiHeatmap
VueUiHistoryPlot
VueUiHorizontalBar
VueUiMolecule
VueUiNestedDonuts
VueUiOnion
VueUiParallelCoordinatePlot
VueUiQuadrant
VueUiQuickChart
VueUiRadar
VueUiRings
VueUiScatter
VueUiSparkStackbar
VueUiStackbar
VueUiStackline
VueUiTreemap
VueUiWordCloud
VueUiWorld
VueUiXy *
VueUiXyCanvas
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 the last
    </div>
  </template>
</VueUiDonut>

The #tooltip-before & #tooltip-after slots also work when using the VueDataUi universal component, if the component it wraps supports them.

Add a watermark using the #watermark slot

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>

Customization of the zoom reset button with the #reset-action slot

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>

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

Themes (since v2.2.9)

All charts are set by default without a theme, and use the default color palette.

9 themes are available for all charts:

default (or '')
dark
zen
hack
concrete
celebration
celebrationNight
minimal
minimalDark

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',
  ...
})

Quick custom theme

You can quickly setup your own theme for a given chart:

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

// Get the default config and set color options
const customTheme = getVueDataUiConfig("vue_ui_xy", {
  colorBackground: "#1A1A1A",
  colorTextPrimary: "#CD9077",
  colorTextSecondary: "#825848",
  colorGrid: "#CD9077",
  colorBorder: "#CD9077",
});

const config = computed(() => {
  // Use the `mergeConfigs` utility to set additional configurations while preserving your theme
  return mergeConfigs({
    defaultConfig: customTheme,
    userConfig: {
      chart: {
        title: {
          text: "Title",
          subtitle: {
            text: "Subtitle",
          },
        },
      },
    },
  });
});

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 | themes | | ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- | ---------------------- | | VueDataUi | (depends on component) | (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 | themes | | ----------------- | ------------------------ | ----------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | -------------- | ------ | | VueUiQuickChart | VueUiQuickChartDataset | VueUiQuickChartConfig | @selectDatapoint, @selectLegend, generatePdf, generateImage, toggleTooltip | #legend, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background | ✅ | ✅ |

Mini charts

| 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 | ❌ | ✅ |

Charts

| Name | ----------------------------- | VueUiAgePyramid | VueUiBump | VueUiCandlestick | VueUiChestnut | VueUiChord | VueUiCirclePack | VueUiDag | VueUiDonutEvolution | VueUiDonut | VueUiDumbbell | VueUiFlow | VueUiFunnel | VueUiGalaxy | VueUiGauge | VueUiHeatmap | VueUiHistoryPlot | VueUiHorizontalBar | VueUiMolecule | VueUiMoodRadar | VueUiNestedDonuts | VueUiOnion | VueUiParallelCoordin | VueUiQuadrant | VueUiRadar | VueUiRidgeline | VueUiRings | VueUiScatter | VueUiStackbar | VueUiStackline | VueUiStripPlot | VueUiThermometer | VueUiTiremarks | VueUiTreemap | VueUiWaffle | VueUiWheel | VueUiWordCloud | VueUiXyCanvas | VueUiXy | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes | | ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | | Array<Array<string / number>> | VueUiSparklineConfig | generatePdf, generateImage, generateCsv, toggleTable, toggleTooltip, getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | | VueUiBumpDatapointItem[] | VueUiBumpConfig | generatePdf, generateImage, generateCsv, toggleTable, getData, getImage | #svg, #watermark, #chart-background, #time-label | ❌ | ✅ | | Array<Array<string / number>> | VueUiCandlestickConfig | generatePdf, generateImage, generateCsv, toggleTable, toggleTooltip, getImage | #svg, #legend, #tooltip-before, #tooltip-after, #reset-action, #watermark, #chart-background | ✅ | ✅ | | VueUiChestnutDatasetRoot[] | VueUiChestnutConfig | @selectRoot, @selectBranch, @selectNut, getData, generatePdf, generateCsv, generateImage, toggleTable, getImage | #svg, #legend, #watermark, #chart-background | ❌ | ✅ | | VueUiChordDataset | VueUiChordConfig | @selectLegend, @selectGroup, @selectRibbon, getData, generatePdf, generateCsv, generateImage, toggleTable, getImage | #svg, #legend, #watermark, #chart-background, #pattern | ❌ | ✅ | | VueUiCirclePackDatasetItem[] | VueUiCirclePackConfig | @selectDatapoint, getData, generatePdf, generateImage, generateCsv, toggleTable, getImage | #svg, #legend, #watermark, #chart-background , #pattern, #zoom-label, #data-label, #tooltip-before, #tooltip-after | ✅ | ✅ | | VueUiDagDataset | VueUiDagConfig | @onNodeClick, @onMidpointEnter, @onMidpointLeave, getData, getImage, generatePdf, generateImage, generateSvg, toggleAnnotator, toggleFullscreen, zoomIn, zoomOut, resetZoom, switchDirection | #svg, #source, #node-label, #node, #tooltip-midpoint, #tooltip-node, #background-pattern | ❌ | ✅ | | VueUiDonutEvolutionDatasetItem[] | VueUiDonutEvolutionConfig | @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable , getImage | #svg, #legend, #reset-action, #watermark, #chart-background | ❌ | ✅ | | VueUiDonutDatasetItem[] | VueUiDonutConfig | @selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage | #svg, #legend, #dataLabel, #tooltip-before, #tooltip-after, #plot-comment, #watermark, #chart-background, #pattern | ✅ | ✅ | | VueUiDumbbellDataset[] | VueUiDumbbellConfig | getData, generatePdf, generateCsv, generateImage, toggleTable, getImage | #svg, #legend, #watermark, #chart-background | ❌ | ✅ | | VueUiFlowDatasetItem[] | VueUiFlowConfig | getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage | #svg, #legend, #watermark, #chart-background, #tooltip-before, #tooltip-after, | ✅ | ✅ | | VueUiFunnelDatasetItem[] | VueUiFunnelConfig | getData, generatePdf, generateCsv, generateImage, toggleTable, getImage | #svg, #watermark, #chart-background | ❌ | ✅ | | VueUiGalaxyDatasetItem[] | VueUiGalaxyConfig | @selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage | #svg, #legend,#tooltip-before, #tooltip-after, #chart-background | ✅ | ✅ | | VueUiGaugeDataset | VueUiGaugeConfig | generatePdf, generateImage, getImage | #svg, #legend, #watermark, #chart-background, #pattern | ❌ | ✅ | | VueUiHeatmapDatasetItem[] | VueUiHeatmapConfig | @selectDatapoint, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage | #svg, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | | VueUiHistoryPlotDatasetItem[] | VueUiHistoryPlotConfig | @selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | | VueUiHorizontalBarDatasetItem[] | VueUiWheelConfig | @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleSort, toggleTooltip , getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background, #pattern | ✅ | ✅ | | VueUiMoleculeDatasetNode[] | VueUiMoleculeConfig | @selectNode, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage | #node, #svg, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | | VueUiMoodRadarDataset | VueUiMoodRadarConfig | getData, generatePdf, generateCsv, generateImage, toggleTable , getImage | #svg, #legend, #watermark, #chart-background | ❌ | ✅ | | VueUiNestedDonutsDatasetItem[] | VueUiNestedDonutsConfig | @selectDatapoint, @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | | VueUiOnionDatasetItem[] | VueUiOnionConfig | @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip, getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | atePlot | VueUiParallelCoordinatePlotDatasetItem[] | VueUiParallelCoordinatePlotConfig | @selectLegend, @selectDatapoint, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage | #svg, #legend, #tooltip-before, #tooltip-after, #plot-comment, #watermark, #chart-background | ✅ | ✅ | | VueUiQuadrantDatasetItem[] | VueUiQuadrantConfig | @selectLegend, @selectPlot, @selectSide, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip, getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background, #datapoint | ✅ | ✅ | | VueUiRadarDataset | VueUiRadarConfig | @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | | VueUiRidgelineDatasetItem[] | VueUiRidgelineConfig | @selectLegend, @selectX, @selectDatapoint, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable , getImage | #svg, #legend, #time-label,#watermark, #chart-background, #pattern | ❌ | ✅ | | VueUiRingsDatasetItem[] | VueUiRingsConfig | @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , toggleLabels, getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background, #pattern | ✅ | ✅ | | VueUiScatterDatasetItem[] | VueUiScatterConfig | hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | | 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 | ✅ | ✅ | | VueUiStacklineDatasetItem[] | VueUiStacklineConfig | @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 | ✅ | ✅ | | VueUiStripPlotDataset[] | VueUiStripPlotConfig | @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip , getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #chart-background | ✅ | ✅ | | VueUiThermometerDataset | VueUiThermometerConfig | generatePdf, generateImage , getImage | #svg, #watermark, #chart-background | ❌ | ✅ | | VueUiTiremarksDataset | VueUiTiremarksConfig | generatePdf, generateImage , getImage | #svg, #legend, #watermark, #chart-background | ❌ | ✅ | | VueUiTreemapDatasetItem[] | VueUiTreemapConfig | @selectLegend, @selectDatapoint, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage | #svg, #rect, #legend, #tooltip-before, #tooltip-after, #watermark, #breadcrumb-label, #breadcrumb-arrow, #group-label | ✅ | ✅ | | VueUiWaffleDatasetItem[] | VueUiWaffleConfig | @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip , getImage | #svg, #legend, #tooltip-before, #tooltip-after, #watermark, #pattern | ✅ | ✅ | | VueUiWheelDataset | VueUiWheelConfig | generatePdf, generateImage , getImage | #svg, #watermark, #chart-background | ❌ | ✅ | | VueUiWordCloudDatasetItem[] / string | VueUiWordCloudConfig | getData, generatePdf, generateImage, generateCsv, toggleTooltip , getImage | #svg, #reset-action, #watermark, #tooltip-before, #tooltip-after, #chart-background | ✅ | ✅ | | VueUiXyCanvasDatasetItem[] | VueUiXyCanvasConfig | @selectLegend, hideSeries, showSeries, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip , getImage | #legend, #tooltip-before, #tooltip-after, #reset-action, #watermark | ✅ | ✅ | | VueUiXyDatasetItem[] | VueUiXyConfig | @selectLegend, @selectX, @selectTimeLabel, hideSeries, showSeries, 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 | ✅ | ✅ |

3D charts

| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes | | ------------ | ------------------- | ------------------ | --------------------------------------------------------- | ----------------------------------------- | -------------- | ------ | | VueUi3dBar | VueUi3dBarDataset | VueUi3dBarConfig | generatePdf, generateImage, toggleTable, getImage | #svg, #watermark, #chart-background | ❌ | ✅ |

Maps

| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes | | ------------ | ----------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | -------------- | ------ | | VueUiGeo | VueUiGeoDatasetItem[] | VueUiGeoConfig | generatePdf, generateImage, toggleTooltip, toggleAnnotator, getImage, zoomIn, zoomOut, resetZoom, focusLocation | #svg, #watermark, #pattern, #chart-background, #datapoint | ✅ | ✅ | | VueUiWorld | VueUiWorldDataset | VueUiWorldConfig | getData, generatePdf, generateImage, toggleTable, toggleTooltip, toggleAnnotator, getImage | #svg, #watermark, #pattern, #chart-background | ✅ | ❌ |

Data tables

| 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 | ❌ |

Rating

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

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 | #content, #top, #bottom | | VueUiDigits | number | VueUiDigitsConfig | ❌ | ❌ | | 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 | - | - | #exp, #sub |

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.

VueUiIcon props:

| Name | type | Default value | | -------------- | ---------------- | ------------- | | name | VueUiIconName | undefined | | size | number | 24 | | stroke | string (color) | '#CCCCCC' | | strokeWidth | number | 1.5 | | isSpin | boolean | false | | spinDuration | string | '1s' |

Icons have 2 slots that can be used to display exp or sub icons:

<VueUiIcon name="database">
  <template #exp v-if="isLoading">
    <VueUiIcon name="spinner2" :is-spin="true"/>
  </template>
  <template #sub>
    <VueUiIcon name="person"/>
  </sub>
</VueUiIcon>

User options

User options menu is accessible in the burger menu located on the top right of the charts, and visible by default. To hide the user options menu, set config.userOptions.show to false:

const config = ref({
  userOptions: {
    show: false
  },
  ...
})

The user options menu can be set to appear only when hovering over 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 the user options menu depend on the type of chart. Some charts have more or fewer actions available. Action buttons contain 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 through 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 attributes 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, optionSvg | | VueUiAgePyramid | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiBump | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiBullet | optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg | | VueUiCandlestick | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiCarouselTable | optionPdf, optionImg, optionCsv, optionAnimation, optionFullscreen | | VueUiChestnut | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiChord | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiCirclePack | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiDag | optionPdf, optionImg, optionSvg, optionFullscreen, optionAnnotator, optionZoom | | VueUiDonut | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg | | VueUiDonutEvolution | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiDumbbell | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiFlow | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiFunnel | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiGalaxy | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiGauge | optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg | | VueUiGeo | optionPdf, optionImg, optionFullscreen, optionAnnotator, optionZoom, optionSvg | | VueUiHeatmap | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiHistoryPlot | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiHorizontalBar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator, optionSvg | | VueUiMolecule | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionZoom, optionSvg | | VueUiMoodRadar | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiNestedDonuts | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg | | VueUiOnion | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiParallelCoordinatePlot | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg | | VueUiQuadrant | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg | | VueUiQuickChart | optionTooltip, optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg | | VueUiRadar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiRelationCircle | optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg | | VueUiRidgeline | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiRings | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionLabels, optionSvg | | VueUiScatter | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | 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, optionSvg | | VueUiStackline | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg | | VueUiStripPlot | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator, optionSvg | | VueUiTableHeatmap | optionPdf, optionImg, optionCsv, optionFullscreen | | VueUiTableSparkline | optionPdf, optionImg, optionCsv, optionFullscreen | | VueUiThermometer | optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg | | VueUiTiremarks | optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg | | VueUiTreemap | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator , optionSvg | | VueUiWaffle | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator , optionSvg | | VueUiWheel | optionPdf, optionImg, optionFullscreen, optionAnnotator, optionSvg | | VueUiWordCloud | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionZoom, optionSvg | | VueUiWorld | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator, optionSvg | | VueUiXy | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator, optionSvg | | 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>

Since version 3.5.1, slots are exposed to customize the chart annotator sub-menu:

<VueUiXy :dataset="dataset" :config="config">
  <template #annotator-action-close>
    <MyCloseIcon />
  </template>
  <template #annotator-action-color="{ color }">
    <MyColorIcon :color="color" />
  </template>
  <template #annotator-action-draw="{ mode }">
    <MyDrawIcon v-if="mode === 'draw'" />
    <MyTextIcon v-else />
  </template>
  <template #annotator-action-undo="{ disabled }">
    <MyUndoIcon />
  </template>
  <template #annotator-action-redo="{ disabled }">
    <MyRedoIcon />
  </template>
  <template #annotator-action-delete="{ disabled }">
    <MyDeleteIcon />
  </template>
</VueUiXy>

Custom palette

It is possible to provide a custom palette in the config prop through config.customPalette (string[]) for the following components:

VueUi3dBar
VueUiBump
VueUiChestnut
VueUiChord
VueUiCirclePack
VueUiDonut
VueUiDonutEvolution
VueUiFlow
VueUiGalaxy
VueUiGauge
VueUiHistoryPlot
VueUiHorizontalBar
VueUiMolecule
VueUiNestedDonuts
VueUiOnion
VueUiParallelCoordinatePlot
VueUiQuadrant
VueUiQuickChart
VueUiRadar
VueUiRelationCircle
VueUiRidgeline
VueUiRings
VueUiScatter
VueUiSparkStackbar
VueUiSparkbar
VueUiStackbar
VueUiStackline
VueUiStripPlot
VueUiTableSparkline
VueUiThermometer
VueUiTreemap
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.

Responsive charts

By default, all charts will scale to the width of their container. However the following charts can be made fully responsive, making them better to use in resizable containers:

| Component | Responsive feature implemented | | --------------------------- | ------------------------------ | | VueUi3dBar | ✅ | | VueUiAgePyramid | ✅ | | VueUiAgePyramid | ✅ | | VueUiBullet | ✅ | | VueUiBump | ✅ | | VueUiCarouselTable | - | | VueUiChestnut | - | | VueUiChord | ✅ | | VueUiCirclePack | ✅ | | VueUiDag | ✅ | | VueUiDonut | ✅ | | VueUiDonutEvolution | ✅ | | VueUiDumbbell | ✅ | | VueUiFlow | ✅ | | VueUiFunnel | ✅ | | VueUiGalaxy | ✅ | | VueUiGauge | ✅ | | VueUiGeo | ✅ | | VueUiHeatmap | ✅ | | VueUiHistoryPlot | ✅ | | VueUiHorizontalBar | ✅ | | VueUiMolecule | - | | VueUiMoodRadar | ✅ | | VueUiNestedDonuts | ✅ | | VueUiOnion | ✅ | | VueUiParallelCoordinatePlot | ✅ | | VueUiQuadrant | ✅ | | VueUiQuickChart | ✅ | | VueUiRadar | ✅ | | VueUiRelationCircle | ✅ | | VueUiRidgeline | ✅ | | VueUiRings | ✅ | | VueUiScatter | ✅ | | VueUiSparkHistogram | ✅ | | VueUiSparkStackbar | - | | VueUiSparkTrend | ✅ | | VueUiSparkbar | - | | VueUiSparkgauge | - | | VueUiSparkline | ✅ | | VueUiStackbar | ✅ | | VueUiStackline | ✅ | | VueUiStripPlot | ✅ | | VueUiTableHeatmap | - | | VueUiTableSparkline | - | | VueUiThermometer | ✅ | | VueUiTimer | ✅ | | VueUiTiremarks | ✅ | | VueUiTreemap | ✅ | | 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. Avo

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vue-data-ui

Charts

Mini charts

3d

Tables

Rating

Maps

Utilities

Installation

Typescript

Vue Data UI version2 -> version3 migration

Version 3 features

Nuxt

Customizable tooltips

Data formatting

Slots

#svg slot

#legend slot (since v.2.0.41)

Legend toggle

Tooltip #tooltip-before & #tooltip-after slots

Add a watermark using the #watermark slot

Customization of the zoom reset button with the #reset-action slot

Config

Themes (since v2.2.9)

Quick custom theme

Available components : details

Universal component

Quick chart

Mini charts

Charts

3D charts

Maps

Data tables

Rating

Utilities

Icons

User options

Custom palette

Responsive charts