ChartLine

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

Demo

React

Vue

Usage

React

import { ChartLine } 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' },
];

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

Vue

<script setup lang="ts">
import { ChartLine } 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' },
];
</script>

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

Props

ChartLine

React

Name	Type	Default	Description
data	ChartLineDataItem[]	—	Array of data objects where each object represents a data point with name and multiple value properties
series	Array<{ name: string; dataKey: string }>	—	Array of series objects defining which data keys to display as lines
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 lines

Vue

Name	Type	Default	Description
data	ChartLineDataItem[]	—	Array of data objects where each object represents a data point with name and multiple value properties
series	Array<{ name: string; dataKey: string }>	—	Array of series objects defining which data keys to display as lines
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 lines

Types

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

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

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