# f0

> Minimal, composable, fully-fluid SVG charts for React

Latest version **1.0.0-b6** (published 2016-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install f0
pnpm add f0
yarn add f0
bun add f0
```

## 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.0-b6 |
| Published | 2016-11-21 |
| First published | 2016-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brent Jackson |
| Maintainers | jxnblk |
| Keywords | charts, react, svg, responsive, fluid |

## Links

- npm: https://www.npmjs.com/package/f0
- npm.io page: https://npm.io/package/f0

## Dependencies (2)

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0-b6 (latest) — 2016-11-21
- 1.0.0-b5 (beta) — 2016-11-21
- 1.0.0-b4 — 2016-10-27
- 1.0.0-b3 — 2016-10-26
- 1.0.0-b2 — 2016-10-24
- 1.0.0-b1 — 2016-10-23
- 1.0.0-b0 — 2016-10-21

## README

# f0

**WIP**

Minimal, composable, fully-fluid SVG charts for React

## Getting Started

```sh
npm i -S f0
```

```js
import React from 'react'
import { Line, Bars } from 'f0'

const App = () => {
  const a = [
    4, 8, 16, 32, 64
  ]

  const b = [
    8, 2, 32, 16, 4
  ]

  return (
    <div>
      <Bars data={a} />
      <Line data={b} />
    </div>
  )
}

export default App
```

## Features

- Fully fluid charts with fixed heights
- Uses HTML for labels to prevent scaling issues
- Bare bones API - only accepts flat arrays as data
- Low-level access to components for composition

## Components

### Line

```js
<Line
  data={data}
/>
```

```js
<Line
  data={data}
  color='tomato'
  strokeWidth={2}
  dots
/>
```

### Area

```js
<Area
  data={data}
/>
```

```js
<Area
  data={data}
  color='tomato'
  opacity={1/2}
/>
```

### Bar

```js
<Bar
  data={data}
  />
```

```js
<Bar
  data={data}
  color='tomato'
  />
```

### Svg

```js
<Svg>
  <Bar data={a} />
  <Line data={b} />
</Svg>
```

### Chart

```js
<Chart>
  <Line data={data} />
  <Axis
    labels={[
      'Mon',
      'Tue',
      'Wed',
      'Thu',
      'Fri'
    ]}
  />
</Chart>
```

### Rules

```js
<Svg>
  <Rules y={5} />
  <Line data={data} />
</Svg>
```

### Axis

```js
<Chart>
  <Line data={data} />
  <Axis
    labels={[
      'Mon',
      'Tue',
      'Wed',
      'Thu',
      'Fri'
    ]}
  />
  <Axis
    y
    labels={[
      32,
      16,
      0
    ]}
  />
</Chart>
```

### DataLabels

```js
<Chart>
  <Bar data={data} />
  <DataLabels data={data} />
</Chart>
```

## Browser Support

**Currently does not work in IE**

The fluid style for these charts relies on SVG 1.2 vector-effect non-scaling-stroke.
Modern evergreen browsers should support this feature, but charts may appear distorted in older browsers, including IE and Edge.

[MIT License](/LICENSE.md)

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