Skip to content

trutoo/funnel-graph

Repository files navigation

Funnel Graph

Continuous Delivery Coverage Status GitHub release (latest by date) npm downloads npm bundle size License

Funnel Graph is a rewrite of @greghub/FunnelGraph.js to TypeScript with improvements such as; types, simplified styling, css animated paths, new basic look, etc... However, it still retains all of the original features include generating horizontal and vertical funnel charts, applying solid colors and gradients, and the possibility to generate a two-dimensional funnel chart.

Screenshot of funnel graph

Installation

Either add the Trutoo GitHub Package registry to your .npmrc

@trutoo:registry=https://npm.pkg.github.com/trutoo

or install using the registry flag

npm install @trutoo/funnel-graph --registry=https://npm.pkg.github.com/trutoo

or install from the npm registry @trutoo/funnel-graph

npm install @trutoo/funnel-graph

Then import the FunnelGraph class to create a graph.

import { FunnelGraph } from '@trutoo/funnel-graph';
// or
const { FunnelGraph } = require('@trutoo/funnel-graph');

const myFunnelGraph = new FunnelGraph({
  container: '.funnel', // or reference to an Element
  data: {
    labels: ['Impressions', 'Add To Cart', 'Buy'],
    colors: ['orange', 'red'],
    values: [12000, 5700, 360],
  },
});
myFunnelGraph.draw();

or using the UMD module and instance.

<script src="https://unpkg.com/@trutoo/funnel-graph@latest/dist/index.umd.min.js"></script>
<script>
  const myFunnelGraph = new fg.FunnelGraph({
    container: '.funnel', // or reference to an Element
    data: {
      labels: ['Impressions', 'Add To Cart', 'Buy'],
      colors: ['orange', 'red'],
      values: [12000, 5700, 360],
    },
  });
  myFunnelGraph.draw();
</script>