Bar list

Skill reaviz/skills/reaviz/charts/bar-list

AI Skills for Reaviz Projects

Install

npx -y skills add reaviz/skills --skill bar-list

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.7 KB, as published. Nobody here has run it

BarList

Horizontal bar list for ranking data. Renders semantic HTML (not SVG) with animated bars, configurable label/value positions, sorting, and percentage mode.

Import

import { BarList, BarListSeries } from 'reaviz';

BarList Props

Prop	Type	Default	Description
`data`	`ChartShallowDataShape[]`	`[]`	Chart data
`type`	`'count' \| 'percent'`	`'count'`	Value scaling — `count` scales to max value, `percent` scales to 100
`sortDirection`	`'asc' \| 'desc' \| 'none'`	`'desc'`	Sort bars by value
`series`	`ReactElement<BarListSeriesProps>`	`<BarListSeries />`	Series component
`id`	`string`	—	CSS ID
`className`	`string`	—	CSS class
`style`	`React.CSSProperties`	—	Inline styles

BarListSeries Props

Prop	Type	Default	Description
`colorScheme`	`ColorSchemeType`	`'cybertron'`	Color scheme name or function
`labelPosition`	`BarListLabelPosition`	`'top'`	Key label placement
`valuePosition`	`BarListLabelPosition`	`'none'`	Value label placement
`labelFormat`	`(data, index) => any`	—	Custom label formatter
`valueFormat`	`(data, index) => any`	—	Custom value formatter
`itemClassName`	`string`	—	CSS class for each bar item
`labelClassName`	`string`	—	CSS class for key labels
`valueClassName`	`string`	—	CSS class for value labels
`barClassName`	`string`	—	CSS class for the inner bar
`outerBarClassName`	`string`	—	CSS class for the bar container
`onItemClick`	`(data: ChartShallowDataShape) => void`	—	Click handler
`onItemMouseEnter`	`(data: ChartShallowDataShape) => void`	—	Mouse enter handler
`onItemMouseLeave`	`(data: ChartShallowDataShape) => void`	—	Mouse leave handler

BarListLabelPosition: 'none' | 'top' | 'start' | 'end' | 'bottom'

Basic Usage

const data = [
  { key: 'Phishing', data: 10 },
  { key: 'Malware', data: 8 },
  { key: 'DDoS', data: 5 },
  { key: 'Ransomware', data: 3 },
];

<BarList data={data} />

With Values Displayed

<BarList
  data={data}
  series={<BarListSeries valuePosition="end" />}
/>

Percentage Mode

<BarList
  data={data}
  type="percent"
  series={
    <BarListSeries
      valuePosition="end"
      valueFormat={(data) => `${data}%`}
    />
  }
/>

Sort Direction

// Ascending (smallest first)
<BarList data={data} sortDirection="asc" />

// Descending (largest first, default)
<BarList data={data} sortDirection="desc" />

// Original data order
<BarList data={data} sortDirection="none" />

Label Positions

// Label above bar (default)
<BarListSeries labelPosition="top" />

// Label at start of bar
<BarListSeries labelPosition="start" />

// Label at end of bar
<BarListSeries labelPosition="end" />

// Label below bar
<BarListSeries labelPosition="bottom" />

// No label
<BarListSeries labelPosition="none" />

Click Handling

<BarList
  data={data}
  series={
    <BarListSeries
      valuePosition="end"
      onItemClick={(item) => console.log(item)}
    />
  }
/>

Custom Styling

<BarList
  data={data}
  series={
    <BarListSeries
      barClassName="rounded-full"
      outerBarClassName="bg-gray-100 rounded-full"
      valueClassName="text-sm font-mono"
    />
  }
/>

Notes

Renders semantic HTML (role="list" / role="listitem"), not SVG
Bars animate with staggered entrance using Framer Motion
Data is normalized to a 0-100% width range using D3 linear scale
Each item carries metadata with original value and calculated percent