ChartArea

The ChartArea component displays data as filled areas with customizable styling, tooltips, and legends. Built with ApexCharts.

Demo

React

Vue

Usage

React

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

const data = [
  { name: 'Jan', revenue: 4000, expenses: 2400 },
  { name: 'Feb', revenue: 3000, expenses: 1398 },
  { name: 'Mar', revenue: 2000, expenses: 9800 },
];

const series = [
  { name: 'Revenue', dataKey: 'revenue' },
  { name: 'Expenses', dataKey: 'expenses' },
];

const colors = ['#14b8a6', '#a855f7'];

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

Vue

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

const data = [
  { name: 'Jan', revenue: 4000, expenses: 2400 },
  { name: 'Feb', revenue: 3000, expenses: 1398 },
  { name: 'Mar', revenue: 2000, expenses: 9800 },
];

const series = [
  { name: 'Revenue', dataKey: 'revenue' },
  { name: 'Expenses', dataKey: 'expenses' },
];

const colors = ['#14b8a6', '#a855f7'];
</script>

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

Props

ChartArea

React

Name	Type	Default	Description
data	ChartDataItem[]	—	Array of data objects where each object represents a data point with multiple value properties
series	Array<{ name: string; dataKey: string }>	—	Array of series objects defining which data keys to display as areas
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 areas
xAxisKey	string	'name'	Key in data objects to use for X-axis labels

Vue

Name	Type	Default	Description
data	ChartDataItem[]	—	Array of data objects where each object represents a data point with multiple value properties
series	Array<{ name: string; dataKey: string }>	—	Array of series objects defining which data keys to display as areas
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 areas
x-axis-key	string	'name'	Key in data objects to use for X-axis labels

Types

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

type ChartDataItem = {
  [key: string]: string | number;
}

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