# simple-funnel-chart

> Simple Funnel Chart on React

Latest version **1.0.3** (published 2023-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-funnel-chart
pnpm add simple-funnel-chart
yarn add simple-funnel-chart
bun add simple-funnel-chart
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-11-09 |
| First published | 2023-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | nekiyl1 |
| Maintainers | nekiyl1 |

## Links

- npm: https://www.npmjs.com/package/simple-funnel-chart
- Repository: https://github.com/nekiyl1/simple-funnel-chart
- Homepage: https://github.com/nekiyl1/simple-funnel-chart#readme
- Issues: https://github.com/nekiyl1/simple-funnel-chart/issues
- npm.io page: https://npm.io/package/simple-funnel-chart

## Recent versions

- 1.0.3 (latest) — 2023-11-09
- 1.0.2 — 2023-11-09
- 1.0.1 — 2023-11-09
- 1.0.0 — 2023-11-09

## README

# simple-funnel-chart

> Simple Funnel Chart on React

[![NPM](https://img.shields.io/npm/v/simple-funnel-chart.svg)](https://www.npmjs.com/package/simple-funnel-chart) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Sample

![Simple Funnel Chart on React][screenshot]

## Install

```bash
npm install --save simple-funnel-chart
```

## Usage

```jsx
import React from 'react'

import { Funnel } from 'simple-funnel-chart'
import 'simple-funnel-chart/dist/index.css'

const data = [
  { value: 100, name: 'Leads' },
  { value: 70, name: 'Calls' },
  { value: 50, name: 'Meetings' },
  { value: 10, name: 'Sales' }
];

const App = () => {
  return <Funnel
    data={data}
    width={250}
    hideLegend={false}
    rowHeight={20}
    onRowClick={(item) => alert(item.name + ' ' + item.value)}
    fontSize={'14px'}
    marginText={'-20px'}
  />
}

export default App
```

## Properties

| Name        | Type     | Required | Default | Description     | 
| ----------- | -------- | -------- | ------- | --------------- |
| data        | Array    | True     |         | Array of values { value: 0, name: 'Name' }|
| width       | Int      | False    | 500     | Funnel width    |
| hideLegend  | Bool     | False    | False   | Hide legend     |
| rowHeight   | Int      | False    | 20      | Row height      |
| onRowClick  | Function | False    |         | A function that is called when a row is clicked; an object with the value and name of the row is passed as a parameter |
| fontSize    | String   | False    | "14px"  | Font size       |
| marginText  | String   | False    | "-20px" | Margin for text, may be required at different font sizes |

## License

MIT © [nekiyl1](https://github.com/nekiyl1)

[screenshot]: screenshot.png

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