ChartPie

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

Demo

React

Vue

Usage

React

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

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

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

Vue

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

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

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

Props

ChartPie

React

Name	Type	Default	Description
data	ChartPieDataItem[]	—	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’)
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	ChartPieDataItem[]	—	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’)
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 ChartPieDataItem = {
  name: string;
  value: number;
}