# @byu-oit/bar-chart

> Generate a bar chart in svg format. Intended to be used to generate an API response.

Latest version **1.4.6** (published 2026-04-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @byu-oit/bar-chart
pnpm add @byu-oit/bar-chart
yarn add @byu-oit/bar-chart
bun add @byu-oit/bar-chart
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.4.6 |
| Published | 2026-04-27 |
| First published | 2018-05-16 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 45.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aaron Rasmussen |
| Maintainers | yoshutch, lehinpm, oscea, stuft2, mhailstone, arasmus8, garygsc, snelg, gholl0, byu-oit-bot, mjweather |
| Keywords | svg, api |

## Links

- npm: https://www.npmjs.com/package/@byu-oit/bar-chart
- Repository: https://github.com/byu-oit/bar-chart
- Homepage: https://github.com/byu-oit/bar-chart#readme
- Issues: https://github.com/byu-oit/bar-chart/issues
- npm.io page: https://npm.io/package/@byu-oit/bar-chart

## Dependencies (2)

- [d3-array](https://npm.io/package/d3-array.md) ^3.2.4
- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2

## Recent versions

- 1.4.6 (latest) — 2026-04-27
- 1.4.5 — 2026-04-27
- 1.4.4 — 2026-04-27
- 1.4.3 — 2023-08-08
- 1.4.2 — 2021-07-02
- 1.4.1 — 2020-11-18
- 1.4.0 — 2020-05-09
- 1.3.2 — 2019-08-30
- 1.3.1 — 2019-08-30
- 1.3.0 — 2019-02-22
- 1.2.0 — 2018-07-20
- 1.1.1 — 2018-07-20
- 1.1.0 — 2018-07-20
- 1.0.2 — 2018-06-22
- 1.0.1 — 2018-05-16
- … 1 more at https://npm.io/package/@byu-oit/bar-chart/versions

## README

# bar-chart
[![codecov](https://codecov.io/gh/byu-oit/bar-chart/graph/badge.svg?token=fsSd5cYktG)](https://codecov.io/gh/byu-oit/bar-chart)

Generate a bar chart in svg format to be used as an API response.

## example output
### Single Value
![svg output](./example/bar-chart.svg)
[svg output](./example/bar-chart.svg)
### Muliple Values
![svg output](./example/inline-multi-bar-chart.svg)
[svg output](./example/inline-multi-bar-chart.svg)
### Stacked
![svg output](./example/stacked-bar-chart.svg)
[svg output](./example/stacked-bar-chart.svg)

## usage
```javascript
import barChart from '@byu-oit/bar-chart'

const myData = [10, 12, 14, 24, 38]
const myDataLabels = ['A', 'B', 'C', 'D', 'E']
const chartSvg = barChart({data: myData, labels: myDataLabels})

```

### parameter definition
The bar chart function takes a single configuration parameter.

key | type | required? | description
--- | ----- | --------- | -----------
data | *Array of Numbers, or 2 Dimensional Array of Numbers* | *required* | An array of values to chart. For example, if you want to chart visits per day, your data could be `[104, 78, 120, 88]` with labels of `['May 13', 'May 14', 'May 15', 'May 16']`. The values may themselves be arrays, but must all have the same length.
labels | *Array of Strings* | *required* | An array of string labels corresponding by index to the associated data element.
legendLabels | *[string labels]* | *optional* | An array of labels for the bar colors. For example, you could chart visits per day, with each browser in a different color.
stacked | *boolean* | *optional, default is false* | If true, the bars will be stacked instead of side-by-side.
colors | *Array of Strings* | *optional* | Supply custom colors for the bars.
showValues | *boolean* | *optional, default is false* | If true, the value will be shown near the top of each bar.

---
_Source: https://npm.io/package/@byu-oit/bar-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._