Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-data-ui

Package Overview
Dependencies
Maintainers
0
Versions
683
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-data-ui

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

  • 2.4.40
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.2K
decreased by-18.04%
Maintainers
0
Weekly downloads
 
Created
Source




vue-data-ui

npm Static Badge GitHub issues License MadeWithVueJs.com shield npm

Interactive documentation

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

Available components

Charts

Mini charts

3d

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

Namedataset typeconfig typeemits / exposed methodsslotscustom tooltipthemes
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)

Namedataset typeconfig typeemits / exposed methodsslotscustom tooltipthemes
VueUiQuickChartVueUiQuickChartDatasetVueUiQuickChartConfig@selectDatapoint, @selectLegend, generatePdf, generateImage, toggleTooltip#legend, #tooltip-before, #tooltip-after, #reset-action, #watermark

Mini charts

Namedataset typeconfig typeemits / exposed methodsslotscustom tooltipthemes
VueUiSparklineVueUiSparklineDatasetItem[]VueUiSparklineConfig@selectDatapoint#svg, #before
VueUiSparkbarVueUiSparkbarDatasetItem[]VueUiSparkbarConfig@selectDatapoint#data-label, #title
VueUiSparkStackbarVueUiSparkStackbarDatasetItem[]VueUiSparkStackbarConfig@selectDatapoint#tooltip-before, #tooltip-after
VueUiSparkHistogramVueUiSparkHistogramDatasetItem[]VueUiSparkHistogramConfig@selectDatapoint
VueUiSparkGaugeVueUiSparkGaugeDatasetVueUiSparkGaugeConfig
VueUiSparkTrendnumber[]VueUiSparkTrendConfig
VueUiGizmoVueUiGizmoDatasetVueUiGizmoConfig
VueUiBulletVueUiBulletDatasetVueUiBulletConfiggeneratePdf, generateImg, getData#svg, #legend, #watermark

Charts

Namedataset typeconfig typeemits / exposed methodsslotscustom tooltipthemes
VueUiAgePyramidArray<Array<string / number>>VueUiSparklineConfiggeneratePdf, generateImage, generateCsv, toggleTable, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiCandlestickArray<Array<string / number>>VueUiCandlestickConfiggeneratePdf, generateImage, generateCsv, toggleTable, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #reset-action, #watermark
VueUiChestnutVueUiChestnutDatasetRoot[]VueUiChestnutConfig@selectRoot, @selectBranch, @selectNut, getData, generatePdf, generateCsv, generateImage, toggleTable#svg, #legend, #watermark
VueUiDonutEvolutionVueUiDonutEvolutionDatasetItem[]VueUiDonutEvolutionConfig@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable#svg, #legend, #reset-action, #watermark
VueUiDonutVueUiDonutDatasetItem[]VueUiDonutConfig@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip#svg, #legend, #dataLabel, #tooltip-before, #tooltip-after, #plot-comment, #watermark
VueUiDumbbellVueUiDumbbellDataset[]VueUiDumbbellConfiggetData, generatePdf, generateCsv, generateImage, toggleTable#svg, #legend, #watermark
VueUiFlowVueUiFlowDatasetItem[]VueUiFlowConfiggetData, generatePdf, generateCsv, generateImage, toggleTable#svg, #watermark
VueUiFunnelVueUiFunnelDatasetItem[]VueUiFunnelConfiggetData, generatePdf, generateCsv, generateImage, toggleTable#svg, #watermark
VueUiGalaxyVueUiGalaxyDatasetItem[]VueUiGalaxyConfig@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #legend,#tooltip-before, #tooltip-after
VueUiGaugeVueUiGaugeDatasetVueUiGaugeConfiggeneratePdf, generateImage#svg, #legend, #watermark
VueUiHeatmapVueUiHeatmapDatasetItem[]VueUiHeatmapConfiggeneratePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #tooltip-before, #tooltip-after, #watermark
VueUiHistoryPlotVueUiHistoryPlotDatasetItem[]VueUiHistoryPlotConfig@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiMoleculeVueUiMoleculeDatasetNode[]VueUiMoleculeConfiggetData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip#svg, #tooltip-before, #tooltip-after, #watermark
VueUiMoodRadarVueUiMoodRadarDatasetVueUiMoodRadarConfiggetData, generatePdf, generateCsv, generateImage, toggleTable#svg, #legend, #watermark
VueUiNestedDonutsVueUiNestedDonutsDatasetItem[]VueUiNestedDonutsConfig@selectDatapoint, @selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiOnionVueUiOnionDatasetItem[]VueUiOnionConfig@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiParallelCoordinatePlotVueUiParallelCoordinatePlotDatasetItem[]VueUiParallelCoordinatePlotConfig@selectLegend, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #plot-comment, #watermark
VueUiQuadrantVueUiQuadrantDatasetItem[]VueUiQuadrantConfig@selectLegend, @selectPlot, @selectSide, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiRadarVueUiRadarDatasetVueUiRadarConfig@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiRingsVueUiRingsDatasetItem[]VueUiRingsConfig@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiScatterVueUiScatterDatasetItem[]VueUiScatterConfiggetData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiStackbarVueUiStackbarDatasetItem[]VueUiStackbarConfig@selectLegend, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #reset-action, #watermark
VueUiStripPlotVueUiStripPlotDataset[]VueUiStripPlotConfig@selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiThermometerVueUiThermometerDatasetVueUiThermometerConfiggeneratePdf, generateImage#svg, #watermark
VueUiTiremarksVueUiTiremarksDatasetVueUiTiremarksConfiggeneratePdf, generateImage#svg, #legend, #watermark
VueUiTreemapVueUiTreemapDatasetItem[]VueUiTreemapConfig@selectLegend, @selectDatapoint, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #rect, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiVerticalBarVueUiVerticalBarDatasetItem[]VueUiWheelConfig@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleSort, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiWaffleVueUiWaffleDatasetItem[]VueUiWaffleConfig@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #watermark
VueUiWheelVueUiWheelDatasetVueUiWheelConfiggeneratePdf, generateImage#svg, #watermark
VueUiWordCloudVueUiWordCloudDatasetItem[] / stringVueUiWordCloudConfiggetData, generatePdf, generateImage, generateCsv, toggleTooltip#svg, #reset-action, #watermark, #tooltip-before, #tooltip-after
VueUiXyCanvasVueUiXyCanvasDatasetItem[]VueUiXyCanvasConfig@selectLegend, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip#legend, #tooltip-before, #tooltip-after, #reset-action, #watermark
VueUiXyVueUiXyDatasetItem[]VueUiXyConfig@selectLegend, @selectX, getData, generatePdf, generateCsv, generateImage, toggleTable, toggleLabels, toggleStack, toggleTooltip#svg, #legend, #tooltip-before, #tooltip-after, #reset-action, #plot-comment,#watermark

3D charts

Namedataset typeconfig typeemits / exposed methodsslotscustom tooltipthemes
VueUi3dBarVueUi3dBarDatasetVueUi3dBarConfiggeneratePdf, generateImage, toggleTable#svg, #watermark

Data tables

Namedataset typeconfig typeemits / exposed methodsslotsthemes
VueUiTableVueUiTableDatasetVueUiTableConfig
VueUiTableHeatmapVueUiTableHeatmapDatasetItem[]VueUiTableHeatmapConfiggeneratePdf, generateCsv, generateImage#caption, #rowTitle, #cell, #sum, #average, #median
VueUiTableSparklineVueUiTableSparklineDatasetItem[]VueUiTableSparklineConfiggeneratePdf, generateCsv, generateImage
VueUiCarouselTableVueUiCarouselTableDatasetVueUiCarouselTableConfiggeneratePdf, generateImage, generateCsv, toggleAnimation, pauseAnimation, resumeAnimation#caption, #th, #td

Rating

Namedataset typeconfig typeemits / exposed methods
VueUiRatingVueUiRatingDatasetVueUiRatingConfig@rate, getData,toggleReadonly
VueUiSmileyVueUiRatingDatasetVueUiSmileyConfig@rate, getData,toggleReadonly

Utilities

Namedataset typeconfig typeemits / exposed methodsslots
VueUiAccordionVueUiAccordionConfig#arrow, #title, #content
VueUiAnnotatorVueUiAnnotatorDatasetVueUiAnnotatorConfig@toggleOpenState, @saveAnnotations
VueUiCursorVueUiCursorConfig
VueUiDashboardVueUiDashboardElement[]VueUiDashboardConfig@change#content
VueUiDigitsnumberVueUiDigitsConfig
VueUiKpinumberVueUiKpiConfig#title, #value, #comment-before, #comment-after
VueUiMiniLoaderVueUiMiniLoaderConfig
VueUiScreenshotVueUiScreenshotConfig@postImage, shoot, close
VueUiSkeletonVueUiSkeletonConfig
VueUiTimerVueUiTimerConfig@start, @pause, @reset, @restart, @lap#time, #controls, #laps
VueUiIconsee 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 nameUser options actions slot names
VueUi3dBaroptionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiAgePyramidoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiBulletoptionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiCandlestickoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiCarouselTableoptionPdf, optionImg, optionCsv, optionAnimation, optionFullscreen
VueUiChestnutoptionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiDonutoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiDonutEvolutionoptionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiDumbbelloptionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiFlowoptionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiFunneloptionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiGalaxyoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiGaugeoptionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiHeatmapoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiHistoryPlotoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiMoleculeoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiMoodRadaroptionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiNestedDonutsoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiOnionoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiParallelCoordinatePlotoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiQuadrantoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiQuickChartoptionTooltip, optionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiRadaroptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiRelationCircleoptionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiRingsoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiScatteroptionTooltip, 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)
VueUiStackbaroptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiStripPlotoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionAnnotator
VueUiTableHeatmapoptionPdf, optionImg, optionCsv, optionFullscreen
VueUiTableSparklineoptionPdf, optionImg, optionCsv, optionFullscreen
VueUiThermometeroptionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiTiremarksoptionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiTreemapoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiVerticalBaroptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator
VueUiWaffleoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiWheeloptionPdf, optionImg, optionFullscreen, optionAnnotator
VueUiWordCloudoptionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator
VueUiXyoptionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack, optionAnnotator
VueUiXyCanvasoptionTooltip, 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:

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

ComponentDefault ThresholdRemark
VueUiXy500
VueUiXyCanvas10000Since this chart uses canvas, threhsold can be set higher
VueUiQuadrant500
VueUiScatter500
VueUiSparkline500
VueUiSparkTrend500

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

Keywords

FAQs

Package last updated on 17 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc