# chartjs-chart-funnel

> Chart.js module for charting funnel charts

Latest version **4.2.5** (published 2025-10-04) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.2.5 |
| Published | 2025-10-04 |
| First published | 2023-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 721.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Samuel Gratzl |
| Maintainers | sgratzl |
| Keywords | chart.js, funnel |

## Links

- npm: https://www.npmjs.com/package/chartjs-chart-funnel
- Repository: https://github.com/sgratzl/chartjs-chart-funnel
- Issues: https://github.com/sgratzl/chartjs-chart-funnel/issues
- npm.io page: https://npm.io/package/chartjs-chart-funnel

## Dependencies (2)

- [chroma-js](https://npm.io/package/chroma-js.md) ^3.1.2
- [@types/chroma-js](https://npm.io/package/@types/chroma-js.md) ^3.1.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

- 4.2.5 (latest) — 2025-10-04
- 4.1.0-alpha.0 (next) — 2023-03-04
- 4.2.4 — 2024-11-16
- 4.2.3 — 2024-10-20
- 4.2.2 — 2024-09-29
- 4.2.1 — 2024-06-08
- 4.2.0 — 2024-03-14
- 4.1.8 — 2024-01-21
- 4.1.7 — 2023-10-20
- 4.1.6 — 2023-10-09
- 4.1.5 — 2023-09-16
- 4.1.4 — 2023-07-13
- 4.1.3 — 2023-07-08
- 4.1.2 — 2023-07-08
- 4.1.1 — 2023-07-04
- … 3 more at https://npm.io/package/chartjs-chart-funnel/versions

## README

# Chart.js Funnel

[![License: MIT][mit-image]][mit-url] [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]

Chart.js module for charting funnel plots. This plugin extends with a new char type `funnel`.

A Funnel chart is a variant of a bar chart where the bar shrinks on one side to the size of the next bar. In addition, they are usually centered giving the visual impression of a funnel.

![funnel chart](https://user-images.githubusercontent.com/4129778/212717664-b3c63b7f-022b-4a39-953c-9d6e45265f7c.png)

Works great with https://github.com/chartjs/chartjs-plugin-datalabels

![funnel chart with labels](https://user-images.githubusercontent.com/4129778/212717832-5932802e-01d2-4da4-82eb-c4f9d3d1eebe.png)

## Related Plugins

Check out also my other chart.js plugins:

- [chartjs-chart-boxplot](https://github.com/sgratzl/chartjs-chart-boxplot) for rendering boxplots and violin plots
- [chartjs-chart-error-bars](https://github.com/sgratzl/chartjs-chart-error-bars) for rendering errors bars to bars and line charts
- [chartjs-chart-geo](https://github.com/sgratzl/chartjs-chart-geo) for rendering map, bubble maps, and choropleth charts
- [chartjs-chart-graph](https://github.com/sgratzl/chartjs-chart-graph) for rendering graphs, trees, and networks
- [chartjs-chart-pcp](https://github.com/sgratzl/chartjs-chart-pcp) for rendering parallel coordinate plots
- [chartjs-chart-venn](https://github.com/sgratzl/chartjs-chart-venn) for rendering venn and euler diagrams
- [chartjs-chart-wordcloud](https://github.com/sgratzl/chartjs-chart-wordcloud) for rendering word clouds
- [chartjs-plugin-hierarchical](https://github.com/sgratzl/chartjs-plugin-hierarchical) for rendering hierarchical categorical axes which can be expanded and collapsed

## Install

```bash
npm install chart.js chartjs-chart-funnel
```

## Usage

see [Examples](https://www.sgratzl.com/chartjs-chart-funnel/examples/)

and [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/eYjEXQW)

## Styling

Trapezoid Elements are Bar elements and provide the same coloring options. In addition, see [TrapezoidElementOptions](https://github.com/sgratzl/chartjs-chart-funnel/blob/main/src/elements/TrapezoidElement.tjs#L11-L27) custom option with respect to shrinking behavior.

In addition, the FunnelController has the following options [FunnelController](https://github.com/sgratzl/chartjs-chart-funnel/blob/main/src/controllers/FunnelController.tjs#L24-L30) to customize the alignment of the chart.

### ESM and Tree Shaking

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

Variant A:

```js
import Chart, { LinearScale, CategoryScale } from 'chart.js';
import { FunnelController, TrapezoidElement } from 'chartjs-chart-funnel';

// register controller in chart.js and ensure the defaults are set
Chart.register(FunnelController, TrapezoidElement, LinearScale, CategoryScale);

const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
      },
    ],
  },
});
```

Variant B:

```js
import { FunnelChart } from 'chartjs-chart-funnel';

const chart = new FunnelChart(document.getElementById('canvas').getContext('2d'), {
  data: {
    //...
  },
});
```

## Development Environment

```sh
npm i -g yarn
yarn install
yarn sdks vscode
```

### Building

```sh
yarn install
yarn build
```

[mit-image]: https://img.shields.io/badge/License-MIT-yellow.svg
[mit-url]: https://opensource.org/licenses/MIT
[npm-image]: https://badge.fury.io/js/chartjs-chart-funnel.svg
[npm-url]: https://npmjs.org/package/chartjs-chart-funnel
[github-actions-image]: https://github.com/sgratzl/chartjs-chart-funnel/workflows/ci/badge.svg
[github-actions-url]: https://github.com/sgratzl/chartjs-chart-funnel/actions
[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen

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