Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sgratzl/chartjs-chart-funnel
Chart.js Funnel chart
https://github.com/sgratzl/chartjs-chart-funnel
chartjs chartjs-plugin funnel-chart funnel-plots javascript typescript
Last synced: 3 months ago
JSON representation
Chart.js Funnel chart
- Host: GitHub
- URL: https://github.com/sgratzl/chartjs-chart-funnel
- Owner: sgratzl
- License: mit
- Created: 2023-01-16T15:11:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-02T01:33:51.000Z (4 months ago)
- Last Synced: 2024-03-02T02:34:01.708Z (4 months ago)
- Topics: chartjs, chartjs-plugin, funnel-chart, funnel-plots, javascript, typescript
- Language: TypeScript
- Homepage: http://www.sgratzl.com/chartjs-chart-funnel/
- Size: 5.67 MB
- Stars: 9
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome - funnel
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.
Works great with https://github.com/chartjs/chartjs-plugin-datalabels
## 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