ChartBarList

The ChartBarList component displays data as a horizontal bar list with customizable styling, tooltips, and legends. Built with ApexCharts.

Demo

React

Vue

Usage

React

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

const data = [
  { name: 'Product A', value: 320 },
  { name: 'Product B', value: 280 },
  { name: 'Product C', value: 245 },
];

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

Vue

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

const data = [
  { name: 'Product A', value: 320 },
  { name: 'Product B', value: 280 },
  { name: 'Product C', value: 245 },
];
</script>

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

Props

ChartBarList

React

Name	Type	Default	Description
data	ChartBaseDataItem[]	—	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
orientation	Orientation	'horizontal'	Orientation of the bars ('horizontal' or 'vertical')
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 bars

Vue

Name	Type	Default	Description
data	ChartBaseDataItem[]	—	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
orientation	Orientation	'horizontal'	Orientation of the bars ('horizontal' or 'vertical')
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 bars

Types

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

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

type Orientation = 'horizontal' | 'vertical'

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