sgratzl / chartjs-chart-funnel

Chart.js Funnel chart

Chart.js Funnel

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 for rendering boxplots and violin plots
• chartjs-chart-error-bars for rendering errors bars to bars and line charts
• chartjs-chart-geo for rendering map, bubble maps, and choropleth charts
• chartjs-chart-graph for rendering graphs, trees, and networks
• chartjs-chart-pcp for rendering parallel coordinate plots
• chartjs-chart-venn for rendering venn and euler diagrams
• chartjs-chart-wordcloud for rendering word clouds
• chartjs-plugin-hierarchical for rendering hierarchical categorical axes which can be expanded and collapsed

Install

npm install chart.js chartjs-chart-funnel

Usage

see Examples

and

Styling

Trapezoid Elements are Bar elements and provide the same coloring options. In addition, see TrapezoidElementOptions custom option with respect to shrinking behavior.

In addition, the FunnelController has the following options FunnelController 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:

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:

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

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

Development Environment

npm i -g yarn
yarn install
yarn sdks vscode

Building

yarn install
yarn build

chartjs-chart-funnel's Issues

Legend isn't working as expected, appears as undefined

When I display legends as visible, they appear as undefined. I just used the namespace options.plugins.legend and the display option as mentioned in ChartJS configuration.

Reproduction link

Codepen example

Expected behavior

Legends should show the same as the label. (In the example, Step 1, Step 2...)

Image showing the error

Context

• Version: v4.0.0-alpha1
• Browser: Chrome

Smoothing out the edges

Hey,

Thanks a lot for developing this chartjs addon, super helpful!

Do you have any pointers to achieve this style?

The closest I've managed to get with chartjs and your addon is this below, so only the smooth edges remains:

Do you think there's a way to achieve this with your library?

thank you!

How can we set our own different background colors for each bar instead of the default?

I have the following question...
How can we set our own different background colors for each bar instead of the default?

Screenshots / Sketches

Thanks

Funnel is horizontal rather than expected vertical

Just out of the box using the sample code from the README, the funnel is draw horizontally (left to right) instead of vertically (top to bottom) as I expected. I am not sure if this is a bug or a feature and I should manually force a rotation onto it, but I didn't see that mentioned in the README so I thought I'd check.

To Reproduce

1. Create the chart with the sample code from the README.
2. Chart is now drawn horziontally, from left to right.
3. This is also seen at the examples: https://www.sgratzl.com/chartjs-chart-funnel/examples/align.html

Expected behavior
Chart is drawn vertically, from top to bottom.

EDIT: Setting options.indexAxis: 'y' fixes this behavior. If this is as intended, then it might be a nice addition to the docs.