Shadcn Chart Donut

VShadcnChartDonut component renders a donut or pie chart using the Unovis library. It supports custom tooltips, a legend, and the ability to configure various chart properties such as colors, sorting, and label formatting.

Usage

This component uses the unovis library, which must be installed in your project. If not already added, you can install it using:

bash

yarn add @unovis/ts @unovis/vue

Import the VShadcnChartDonut component into your Vue file:

vue

import VShadcnChartDonut from 'UiKit/components/VCharts/VShadcnChartDonut/VShadcnChartDonut.vue';

Props

Prop	Type	Description	Default
`data`	`Array<T>`	The data to be displayed in the chart.	-
`colors`	`Array<string>`	The colors to be used for each segment of the chart.	-
`index`	`string`	The key for the index of each data item in the chart.	-
`margin`	`Function`	A function returning the margin configuration for the chart.	`{ top: 0, bottom: 0, left: 0, right: 0 }`
`showLegend`	`Boolean`	Whether to display the legend.	`true`
`showTooltip`	`Boolean`	Whether to show the tooltip.	`true`
`filterOpacity`	`Number`	The opacity for inactive segments.	`0.2`
`category`	`KeyOfT`	The name of the key containing the quantitative chart values.	-
`type`	`'donut'	'pie'`	The type of the chart.
`sortFunction`	`Function`	A function to sort the segments of the chart.	`undefined`
`valueFormatter`	`Function`	A function to format the value displayed on the chart.	`(tick: number) => \`${tick}``
`customTooltip`	`Component`	A custom tooltip component to render.	-
`showCenter`	`Boolean`	Whether to show a central label in the donut chart.	-
`title`	`String`	The title to display above the chart.	-

Example Usage

vue

<script setup lang="ts">
import VShadcnChartDonut from 'UiKit/components/VCharts/VShadcnChartDonut/VShadcnChartDonut.vue';
const data = [
  { name: 'Jan', total: 10 },
  { name: 'Feb', total: 20 },
  { name: 'Mar', total: 25 },
  { name: 'Apr', total: 5 },
  { name: 'May', total: 30 },
  { name: 'Jun', total: 10 },
];
const valueFormatter = (tick: number) => `${tick} %`;
</script>

<template>
      <VShadcnChartDonut
          title="Geographic Diversification"
          index="name"
          category="total"
          :data="data"
          :value-formatter="valueFormatter"
        />
</template>