Returnless UI

Category bar ​

The category bar component is used to display a list of categories with a selected category highlighted.

Props
categories:
BarChartCategory<Record<string, any>>[]
Defaults to unknown
Select the categories from your data. Used to populate the legend and tooltip.
data:
Record<string, any>[]
Defaults to unknown
The source data, in which each entry is a dictionary.
labelAccessorKey:
string
Defaults to unknown
Sets the key to map the data to the axis.
stacked?:
boolean
Defaults to false
Sets the bar chart to stacked mode.

Usage ​

Jan
Dec
js
<script lang="ts" setup>
import {
  BarChart,
  BarChartCategory,
} from '@returnless/focus-ui';

type Record = {
  name: string;
  total: number;
  predicted: number;
};

const data: Record[] = [
  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
];

const categories: BarChartCategory<Record>[] = [
  { label: 'Predicted', accessorKey: 'predicted', color: 'green' },
];
</script>

<template>
  <BarChart :data="data" :categories="categories" label-accessor-key="name" />
</template>

Bar chart with multiple categories ​

Jan
Dec
js
<script lang="ts" setup>
import {
  BarChart,
  BarChartCategory,
} from '@returnless/focus-ui';

type Record = {
  name: string;
  total: number;
  predicted: number;
};

const data: Record[] = [
  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
];

const categories: BarChartCategory<Record>[] = [
  { label: 'Predicted', accessorKey: 'predicted', color: 'green' },
  { label: 'Total', accessorKey: 'total', color: 'purple' },
];
</script>

<template>
  <BarChart :data="data" :categories="categories" label-accessor-key="name" />
</template>

Stacked bar chart ​

Use the stacked prop to display a stacked bar chart.

Jan
Dec
js
<script lang="ts" setup>
import {
  BarChart,
  BarChartCategory,
} from '@returnless/focus-ui';

type Record = {
  name: string;
  total: number;
  predicted: number;
};

const data: Record[] = [
  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
];

const categories: BarChartCategory<Record>[] = [
  { label: 'Predicted', accessorKey: 'predicted', color: 'green' },
  { label: 'Total', accessorKey: 'total', color: 'purple' },
];
</script>

<template>
  <BarChart :data="data" :categories="categories" label-accessor-key="name" stacked />
</template>