# bar-chart-react

> a bar chart for React

Latest version **1.0.2** (published 2018-10-23) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install bar-chart-react
pnpm add bar-chart-react
yarn add bar-chart-react
bun add bar-chart-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-10-23 |
| First published | 2018-10-22 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 45.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kiraknowsbest |
| Maintainers | kiraknowsbest |
| Keywords | react, canvas, data visualization, chart, graph |

## Links

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

## Dependencies (1)

- [webpack](https://npm.io/package/webpack.md) ^2.6.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-10-23
- 1.0.1 — 2018-10-23
- 1.0.0 — 2018-10-22

## README

# react-bar-chart
___
A bar chart component. This was made specifically for viewing data over a period of time (monthly and annually). The only prop that is necessary is **data**. **data** is expected to be an array of numbers. The numbers are used to create bars on a canvas element.

## Example

```javascript
import BarChart from 'react-bar-chart';

const DataPlot = () => {
  let data = [3, 5, 1, 7, 9, 12, 4];
  return <BarChart data={data} />
};

```

## Additional props
___
To customize the look of the chart, various props can be provided.

  * labelColor: the color of the graph's label (default #eee)
  * countColor: the color of each bar's count (default #eee)
  * barColor: the color of the bars in the graph (default #f3ab10)
  * backgroundColor: the color of the canvas element (default #3a3a3a)
  * baseColor: the color of the x-axis (0) (default #eee)
  * gridColor: the color of horizontal lines on the graph (default #555)
  * fronFamily: the font family for labels (default Arial)
  * padding: the padding inside the canvas element (default 30)
  * width: the width of the canvas element (default 1000)
  * height: the height of the canvas element (default 500)
  * noResultText: the text to display if no data is provided (default "Nothing to display")
  * showCount: whether or not the counts should be displayed (default false)

## Multiple bars per column
___
It may be useful to have multiple bars per column. An example of this might be the number of tickets completed by different employees. By passing in additional parameters, the view can be further customized to improve readability of the data.

  * multi: whether or not there are multiple bars per column
  * multiMetaData: data that helps build the display

## multiMetaData
___
*multiMetaData* is expected to be an object in the following shape:

```javascript
{
  uniqueLabel: {
    color: 'red' // 'red', '#FF0000', 'rgba(255, 0, 0, .7)'
  }
}
```

Each key on multiMetaData should be one of the sources of a data point. In a comparison of 'Completed' vs 'Uncompleted' tickets, you would provide an object such as this:

```javascript
{
  Completed: {
    color: '#00FF00'
  },
  Uncompleted: {
    color: '##0000FF'
  }
}
```

When providing multiple data sources, the data provided should _not_ be an array of numbers. It is expected to be a nested array of Objects. Continuing with the 'Completed' vs 'Uncompleted' example, the _data_ would be something like this.

```javascript
const data = [
  [
    {
      label: 'Completed',
      count: 5
    },
    {
      label: 'Uncompleted',
      count: 2
    }
  ]
]
```

Notice that each _label_ is also a key on multiMetaData. This is how the component decides what color each bar should be.

When dealing with dynamic sources for the data points, it may be useful to use a deterministic function to create a color. If a color is not deterministic, it may change colors when a re-render is triggered.

Example of getting a deterministic color based for a string:

```javascript
const uniqueColor = str => {
  // generates a deterministic value for a given string
  let vals = [];
  const vowels = new Set(['a', 'e', 'i', 'o', 'u']);
  let vowelCount = 0;
  let consonantsCount = 0;
  let captureLength = Math.floor(str.length / 3);
  for (let i = 0; i < 3; i++) {
    let currentStr = str.substr(i * captureLength, (i + 1) * captureLength)
    let val = 0;
    for (let j = 0; j < currentStr.length; j++) {
      if (vowels.has(currentStr[j])) {
        vowelCount++;
      } else {
        consonantsCount++;
      }
      val = (val + currentStr.charCodeAt(j)) % 255;
    }
    vals.push(Math.max(val, 100))
  }
  vals[0] = Math.max(100, vals[0] + (consonantsCount * 10) - (vowelCount * 7));
  vals[1] = Math.max(100, vals[1] - (consonantsCount * 8) + (vowelCount * 11));
  vals[2] = Math.max(100, vals[2] + (consonantsCount * 6) - (vowelCount * 6));
  return `rgb(${vals[0]}, ${vals[1]}, ${vals[2]})`;
};
```

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