vue-data-ui

An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling

1,206

View on GitHub View on NPM

Top Related Projects

vue-echarts

9,682

Vue.js component for Apache ECharts™.

Quick Overview

Vue-data-ui is a Vue 3 component library for data visualization. It provides a set of customizable and responsive chart components that can be easily integrated into Vue applications. The library aims to simplify the process of creating interactive and visually appealing data representations.

Pros

Easy integration with Vue 3 projects
Responsive and customizable chart components
Lightweight and performant
TypeScript support

Cons

Limited variety of chart types compared to some other libraries
Documentation could be more comprehensive
Relatively new project, may have fewer community resources
Limited animation options for chart transitions

Code Examples

Basic Bar Chart:

<template>
  <BarChart :data="chartData" :options="chartOptions" />
</template>

<script setup>
import { BarChart } from 'vue-data-ui'
import { ref } from 'vue'

const chartData = ref([
  { label: 'A', value: 10 },
  { label: 'B', value: 20 },
  { label: 'C', value: 15 },
])

const chartOptions = ref({
  title: 'Sample Bar Chart',
  xAxisLabel: 'Categories',
  yAxisLabel: 'Values',
})
</script>

Line Chart with Multiple Series:

<template>
  <LineChart :data="chartData" :options="chartOptions" />
</template>

<script setup>
import { LineChart } from 'vue-data-ui'
import { ref } from 'vue'

const chartData = ref([
  { x: 1, y1: 10, y2: 15 },
  { x: 2, y1: 20, y2: 25 },
  { x: 3, y1: 15, y2: 20 },
])

const chartOptions = ref({
  title: 'Multi-Series Line Chart',
  xAxisLabel: 'X Axis',
  yAxisLabel: 'Y Axis',
  series: [
    { key: 'y1', name: 'Series 1', color: '#ff0000' },
    { key: 'y2', name: 'Series 2', color: '#00ff00' },
  ],
})
</script>

Pie Chart with Custom Colors:

<template>
  <PieChart :data="chartData" :options="chartOptions" />
</template>

<script setup>
import { PieChart } from 'vue-data-ui'
import { ref } from 'vue'

const chartData = ref([
  { label: 'A', value: 30 },
  { label: 'B', value: 40 },
  { label: 'C', value: 30 },
])

const chartOptions = ref({
  title: 'Custom Color Pie Chart',
  colors: ['#ff0000', '#00ff00', '#0000ff'],
})
</script>

Getting Started

Install the library:
```
npm install vue-data-ui
```

Import and use components in your Vue 3 application:

<template>
  <BarChart :data="chartData" :options="chartOptions" />
</template>

<script setup>
import { BarChart } from 'vue-data-ui'
import { ref } from 'vue'

const chartData = ref([
  { label: 'A', value: 10 },
  { label: 'B', value: 20 },
  { label: 'C', value: 15 },
])

const chartOptions = ref({
  title: 'My First Chart',
})
</script>

Customize the chart options and data as needed for your specific use case.

Competitor Comparisons

vue-apexcharts

1,335

📊 Vue 2 component for ApexCharts

Pros of vue-apexcharts

More comprehensive and feature-rich charting library
Extensive documentation and community support
Wide range of chart types and customization options

Cons of vue-apexcharts

Larger bundle size due to its extensive feature set
Steeper learning curve for complex configurations
May be overkill for simple visualization needs

Code Comparison

vue-apexcharts:

<template>
  <apexchart type="bar" :options="chartOptions" :series="series"></apexchart>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'
</script>

vue-data-ui:

<template>
  <BarChart :data="chartData" :options="chartOptions" />
</template>

<script>
import { BarChart } from 'vue-data-ui'
</script>

vue-apexcharts offers a more versatile apexchart component that can render various chart types based on the type prop, while vue-data-ui provides separate components for different chart types. vue-apexcharts requires more configuration in the options and series props, whereas vue-data-ui focuses on simplicity with a more straightforward data prop structure.

vue-apexcharts is better suited for complex, data-intensive applications with diverse visualization needs, while vue-data-ui is ideal for projects requiring quick and simple chart implementations with a smaller footprint.

vue-echarts

9,682

Vue.js component for Apache ECharts™.

Pros of vue-echarts

More comprehensive and feature-rich charting library
Extensive documentation and community support
Wider range of chart types and customization options

Cons of vue-echarts

Larger bundle size due to its extensive feature set
Steeper learning curve for beginners
May be overkill for simple data visualization needs

Code Comparison

vue-echarts:

<template>
  <v-chart :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent } from "echarts/components";
import VChart from "vue-echarts";

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent]);

export default {
  components: {
    VChart,
  },
  data() {
    return {
      option: {
        // Chart configuration
      },
    };
  },
};
</script>

vue-data-ui:

<template>
  <pie-chart :data="data" :options="options" />
</template>

<script>
import { PieChart } from "vue-data-ui";

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      data: [
        // Chart data
      ],
      options: {
        // Chart options
      },
    };
  },
};
</script>

vue-echarts offers more flexibility and customization options but requires more setup and configuration. vue-data-ui provides a simpler API for basic chart types, making it easier to use for straightforward data visualization tasks.

vue-chartjs

5,565

📊 Vue.js wrapper for Chart.js

Pros of vue-chartjs

More mature and widely adopted project with a larger community
Supports a broader range of chart types out of the box
Better documentation and examples available

Cons of vue-chartjs

Heavier dependency on Chart.js, which may increase bundle size
Less flexibility for custom chart designs
Steeper learning curve for developers new to Chart.js

Code Comparison

vue-chartjs:

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

vue-data-ui:

import { LineChart } from 'vue-data-ui'

export default {
  components: { LineChart },
  template: '<LineChart :data="chartData" :options="options" />'
}

The code comparison shows that vue-chartjs requires extending the chart component and calling a render method, while vue-data-ui allows for more declarative usage within the template.

vue-chartjs is better suited for projects requiring standard chart types and extensive Chart.js features. vue-data-ui might be preferable for simpler visualizations or when greater customization is needed without relying heavily on Chart.js.

Both libraries have their strengths, and the choice between them depends on the specific requirements of your project, such as the complexity of charts needed, desired customization level, and familiarity with Chart.js.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

Utilities

Installation

npm i vue-data-ui

You can declare components globally in your main.js:

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

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

const app = createApp(App);

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

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

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

Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. 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>`;
}

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

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>

Tooltip #tooltip-before & #tooltip-after slots

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
VueUiVerticalBar
VueUiWordCloud
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 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.

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.

3 themes are available for all charts:

zen
hack
concrete

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

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

Mini charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
`VueUiSparkline`	`VueUiSparklineDatasetItem[]`	`VueUiSparklineConfig`	`@selectDatapoint`	`#svg`, `#before`	â	â
`VueUiSparkbar`	`VueUiSparkbarDatasetItem[]`	`VueUiSparkbarConfig`	`@selectDatapoint`	`#data-label`, `#title`	â	â
`VueUiSparkStackbar`	`VueUiSparkStackbarDatasetItem[]`	`VueUiSparkStackbarConfig`	`@selectDatapoint`	`#tooltip-before`, `#tooltip-after`	â	â
`VueUiSparkHistogram`	`VueUiSparkHistogramDatasetItem[]`	`VueUiSparkHistogramConfig`	`@selectDatapoint`	â	â	â
`VueUiSparkGauge`	`VueUiSparkGaugeDataset`	`VueUiSparkGaugeConfig`	â	â	â	â
`VueUiSparkTrend`	`number[]`	`VueUiSparkTrendConfig`	â	â	â	â
`VueUiGizmo`	`VueUiGizmoDataset`	`VueUiGizmoConfig`	â	â	â	â
`VueUiBullet`	`VueUiBulletDataset`	`VueUiBulletConfig`	`generatePdf`, `generateImg`, `getData`	`#svg`, `#legend`, `#watermark`	â	â

Charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
`VueUiAgePyramid`	`Array<Array<string / number>>`	`VueUiSparklineConfig`	`generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiCandlestick`	`Array<Array<string / number>>`	`VueUiCandlestickConfig`	`generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`	â	â
`VueUiChestnut`	`VueUiChestnutDatasetRoot[]`	`VueUiChestnutConfig`	`@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`	`#svg`, `#legend`, `#watermark`	â	â
`VueUiDonutEvolution`	`VueUiDonutEvolutionDatasetItem[]`	`VueUiDonutEvolutionConfig`	`@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`	`#svg`, `#legend`, `#reset-action`, `#watermark`	â	â
`VueUiDonut`	`VueUiDonutDatasetItem[]`	`VueUiDonutConfig`	`@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`	`#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`	â	â
`VueUiDumbbell`	`VueUiDumbbellDataset[]`	`VueUiDumbbellConfig`	`getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`	`#svg`, `#legend`, `#watermark`	â	â
`VueUiFlow`	`VueUiFlowDatasetItem[]`	`VueUiFlowConfig`	`getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`	`#svg`, `#watermark`	â	â
`VueUiFunnel`	`VueUiFunnelDatasetItem[]`	`VueUiFunnelConfig`	`getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`	`#svg`, `#watermark`	â	â
`VueUiGalaxy`	`VueUiGalaxyDatasetItem[]`	`VueUiGalaxyConfig`	`@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`	â	â
`VueUiGauge`	`VueUiGaugeDataset`	`VueUiGaugeConfig`	`generatePdf`, `generateImage`	`#svg`, `#legend`, `#watermark`	â	â
`VueUiHeatmap`	`VueUiHeatmapDatasetItem[]`	`VueUiHeatmapConfig`	`generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiHistoryPlot`	`VueUiHistoryPlotDatasetItem[]`	`VueUiHistoryPlotConfig`	`@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiMolecule`	`VueUiMoleculeDatasetNode[]`	`VueUiMoleculeConfig`	`getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`	`#svg`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiMoodRadar`	`VueUiMoodRadarDataset`	`VueUiMoodRadarConfig`	`getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`	`#svg`, `#legend`, `#watermark`	â	â
`VueUiNestedDonuts`	`VueUiNestedDonutsDatasetItem[]`	`VueUiNestedDonutsConfig`	`@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiOnion`	`VueUiOnionDatasetItem[]`	`VueUiOnionConfig`	`@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiParallelCoordinatePlot`	`VueUiParallelCoordinatePlotDatasetItem[]`	`VueUiParallelCoordinatePlotConfig`	`@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`	â	â
`VueUiQuadrant`	`VueUiQuadrantDatasetItem[]`	`VueUiQuadrantConfig`	`@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiRadar`	`VueUiRadarDataset`	`VueUiRadarConfig`	`@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiRings`	`VueUiRingsDatasetItem[]`	`VueUiRingsConfig`	`@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiScatter`	`VueUiScatterDatasetItem[]`	`VueUiScatterConfig`	`getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiStackbar`	`VueUiStackbarDatasetItem[]`	`VueUiStackbarConfig`	`@selectLegend`, `@selectDatapoint`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`	`#svg`, `#legend`, `#time-label`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`	â	â
`VueUiStripPlot`	`VueUiStripPlotDataset[]`	`VueUiStripPlotConfig`	`@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiThermometer`	`VueUiThermometerDataset`	`VueUiThermometerConfig`	`generatePdf`, `generateImage`	`#svg`, `#watermark`	â	â
`VueUiTiremarks`	`VueUiTiremarksDataset`	`VueUiTiremarksConfig`	`generatePdf`, `generateImage`	`#svg`, `#legend`, `#watermark`	â	â
`VueUiTreemap`	`VueUiTreemapDatasetItem[]`	`VueUiTreemapConfig`	`@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiVerticalBar`	`VueUiVerticalBarDatasetItem[]`	`VueUiWheelConfig`	`@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiWaffle`	`VueUiWaffleDatasetItem[]`	`VueUiWaffleConfig`	`@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip`	`#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`	â	â
`VueUiWheel`	`VueUiWheelDataset`	`VueUiWheelConfig`	`generatePdf`, `generateImage`	`#svg`, `#watermark`	â	â
`VueUiWordCloud`	`VueUiWordCloudDatasetItem[] / string`	`VueUiWordCloudConfig`	`getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip`	`#svg`, `#reset-action`, `#watermark`, `#tooltip-before`, `#tooltip-after`	â	â
`VueUiXyCanvas`	`VueUiXyCanvasDatasetItem[]`	`VueUiXyCanvasConfig`	`@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip`	`#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`	â	â
`VueUiXy`	`VueUiXyDatasetItem[]`	`VueUiXyConfig`	`@selectLegend`, `@selectX`, `@selectTimeLabel`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleStack`, `toggleTooltip`	`#svg`, `#legend`, `#time-label`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#plot-comment`,`#watermark`	â	â

3D charts

Name	dataset type	config type	emits / exposed methods	slots	custom tooltip	themes
`VueUi3dBar`	`VueUi3dBarDataset`	`VueUi3dBarConfig`	`generatePdf`, `generateImage`, `toggleTable`	`#svg`, `#watermark`	â	â

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
`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`	`#content`
`VueUiDigits`	`number`	`VueUiDigitsConfig`	â	â
`VueUiKpi`	`number`	`VueUiKpiConfig`	â	`#title`, `#value`, `#comment-before`, `#comment-after`
`VueUiMiniLoader`	â	`VueUiMiniLoaderConfig`	â	â
`VueUiScreenshot`	â	`VueUiScreenshotConfig`	`@postImage`, `shoot`, `close`	â
`VueUiSkeleton`	â	`VueUiSkeletonConfig`	â	â
`VueUiTimer`	â	`VueUiTimerConfig`	`@start`, `@pause`, `@reset`, `@restart`, `@lap`	`#time`, `#controls`, `#laps`
`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.

User options

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

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>

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
VueUiDonut	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiDonutEvolution	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiDumbbell	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiFlow	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
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
VueUiVerticalBar	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
VueUiXy	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator
VueUiXyCanvas	optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator

Custom palette

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

VueUi3dBar
VueUiChestnut
VueUiDonut
VueUiDonutEvolution
VueUiFlow
VueUiGalaxy
VueUiGauge
VueUiHistoryPlot
VueUiMolecule
VueUiNestedDonuts
VueUiOnion
VueUiParallelCoordinatePlot
VueUiQuadrant
VueUiQuickChart
VueUiRadar
VueUiRelationCircle
VueUiRings
VueUiScatter
VueUiSparkStackbar
VueUiSparkbar
VueUiStackbar
VueUiStripPlot
VueUiTableSparkline
VueUiThermometer
VueUiTreemap
VueUiVerticalBar
VueUiWaffle
VueUiWordCloud
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 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	-
VueUiDonut	â
VueUiDonutEvolution	-
VueUiDumbbell	â
VueUiFlow	-
VueUiFunnel	â
VueUiGalaxy	-
VueUiGauge	â
VueUiHeatmap	-
VueUiHistoryPlot	â
VueUiMolecule	-
VueUiMoodRadar	-
VueUiNestedDonuts	â
VueUiOnion	â
VueUiParallelCoordinatePlot	â
VueUiQuadrant	â
VueUiQuickChart	â
VueUiRadar	â
VueUiRelationCircle	â
VueUiRings	â
VueUiScatter	â
VueUiSparkHistogram	-
VueUiSparkStackbar	-
VueUiSparkTrend	-
VueUiSparkbar	-
VueUiSparkgauge	-
VueUiSparkline	â
VueUiStackbar	â
VueUiStripPlot	â
VueUiTableHeatmap	-
VueUiTableSparkline	-
VueUiThermometer	-
VueUiTimer	â
VueUiTiremarks	-
VueUiTreemap	â
VueUiVerticalBar	â
VueUiWaffle	â
VueUiWheel	â
VueUiWordCloud	â
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.

Big data optimization (since v2.4.11)

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	500
VueUiXyCanvas	10000	Since this chart uses canvas, threhsold can be set higher
VueUiQuadrant	500
VueUiScatter	500
VueUiSparkline	500
VueUiSparkTrend	500

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of vue-apexcharts

Cons of vue-apexcharts

Code Comparison

Pros of vue-echarts

Cons of vue-echarts

Code Comparison

Pros of vue-chartjs

Cons of vue-chartjs

Code Comparison

Convert designs to code with AI

README

vue-data-ui

Charts

Mini charts

3d

Tables

Rating

Utilities

Installation

Typescript

Nuxt

Customizable tooltips

Data formatting

Slots

#svg slot

#legend slot (since v.2.0.41)

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)

Available components : details

Universal component

Quick chart

Mini charts

Charts

3D charts

Data tables

Rating

Utilities

Icons

User options

Custom palette

Responsive charts

Big data optimization (since v2.4.11)

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days