ChartDonut

The ChartDonut component displays data as a donut chart with customizable styling, tooltips, and legends. Built with ApexCharts.

Demo

React

Vue

Usage

React

import { ChartDonut } from '@fintech-sandpit/ui/react';

const data = [
  { name: 'Windows', value: 186 },
  { name: 'Mac', value: 80 },
  { name: 'Linux', value: 120 },
];

return (
  <ChartDonut
    data={data}
    height="400px"
    showTooltip={true}
    showLegend={true}
  />
);

Vue

<script setup lang="ts">
import { ChartDonut } from '@fintech-sandpit/ui/vue';

const data = [
  { name: 'Windows', value: 186 },
  { name: 'Mac', value: 80 },
  { name: 'Linux', value: 120 },
];
</script>

<template>
  <ChartDonut
    :data="data"
    height="400px"
    :show-tooltip="true"
    :show-legend="true"
  />
</template>

Props

ChartDonut

React

Name	Type	Default	Description
data	ChartDonutDataItem[]	—	Array of data objects where each object represents a data point with name and value
width	CssUnit	'100%'	Width of the chart container (CSS unit string like ‘100%’, ‘400px’, ‘50rem’)
height	CssUnit	'400px'	Height of the chart container (CSS unit string like ‘400px’, ‘50vh’)
innerRadius	CssUnit	'70%'	Size of the inner hole (donut hole) as a percentage. Higher values create a thinner ring (e.g., ‘70%’ means the hole is 70% of the diameter, leaving 30% for the ring)
legendPosition	LegendPosition	'bottom'	Position of the legend
showTooltip	boolean	true	Whether to display tooltips on hover
showLegend	boolean	true	Whether to display the legend
colors	string[]	—	Array of colors for the chart segments

Vue

Name	Type	Default	Description
data	ChartDonutDataItem[]	—	Array of data objects where each object represents a data point with name and value
width	CssUnit	'100%'	Width of the chart container (CSS unit string like ‘100%’, ‘400px’, ‘50rem’)
height	CssUnit	'400px'	Height of the chart container (CSS unit string like ‘400px’, ‘50vh’)
inner-radius	CssUnit	'70%'	Size of the inner hole (donut hole) as a percentage. Higher values create a thinner ring (e.g., ‘70%’ means the hole is 70% of the diameter, leaving 30% for the ring)
legend-position	LegendPosition	'bottom'	Position of the legend
show-tooltip	boolean	true	Whether to display tooltips on hover
show-legend	boolean	true	Whether to display the legend
colors	string[]	—	Array of colors for the chart segments

Types

type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`

type LegendPosition = 'top' | 'bottom' | 'left' | 'right'

type ChartDonutDataItem = {
  name: string;
  value: number;
}