🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

chartjs-chart-funnel

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

chartjs-chart-funnel

Chart.js module for charting funnel charts

4.2.4
latest
Source
npm
Version published
Weekly downloads
13K
-23.01%
Maintainers
1
Weekly downloads
 
Created
Source

Chart.js Funnel

License: MIT NPM Package Github Actions

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

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

funnel chart with labels

Check out also my other chart.js plugins:

Install

npm install chart.js chartjs-chart-funnel

Usage

see Examples

and Open in CodePen

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

Keywords

chart.js

FAQs

Package last updated on 16 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts