It would be helpful if there was a version description of some sort at the top of the js and css files on the CDN, otherwise it's hard to tell if you have the latest version.

It appears that I cannot include more than 10 subcategories/sublabels/whatever you call them, in one chart. Is there actually a hard limit of 10 on this? Is there a reason for this and can I remove it?

Hi,

• I would like to add some hover action to display more data
• click on a section/ part and do eg. navigation. Therefore I need to access the data.

Whats your recommended way to do so?

Thx.

How do you look at the responsive sizing feature?
Add support for 100% height and width or responsive to options!

{
  responsiveHeight: true
  responsiveWidth: true
}

or support

{
  width: '100%',
  height: '100%'
}

Or resize helper to library

var graph = new FunnelGraph({
    container: '.funnel',
    gradientDirection: 'horizontal',
    data: {...},
    displayPercent: true,
    direction: 'horizontal'
});

var responsiveGraph = Funnel.helpers.resize(graph)

graph.draw();

Not sure if anyone has seen this so far, but when changing data types/first load the segment labels will inconsistently trigger/fail to trigger. This was using the example code + CDN. But the same is happening locally compiled. Any ideas?

I've been adding a TypeScript interface to use funnel-graph-js in my project. Follows the code if you want to create a TypeScript version here 😄

export interface IFunnelGraph {
  container: string;
  gradientDirection: 'horizontal' | 'vertical';
  data: {
    colors: string[];
    labels: string[];
    values: number[];
  };
  displayPercent: boolean;
  direction: 'horizontal' | 'vertical';
  height: number;
  width: number;
  subLabelValue: 'percent' | 'raw';
  draw: () => {};
  makeVertical: () => {};
  makeHorizontal: () => {};
  toggleDirection: () => {};
  gradientMakeVertical: () => {};
  gradientMakeHorizontal: () => {};
  gradientToggleDirection: () => {};
  updateHeight: () => {};
  updateWidth: () => {};
  updateData: (data: any) => {};
  update: (options: any) => {};
}

Thanks for your project ❤️

An option to override the internal formatNumber would allow for simple cusomization of the value labels, like localized formatting, adding units or formatting large values ("200k" instead of "200,000").

Would it be possible to add the following features?

• Add a setting to disable sublabel percent
• Add a callback function to customize sublabel content

Thanks!

It would be very useful if the chart could display the "nested values" used for sub-labels in their raw form. That would allow for things like displaying a count of data rows that make up the segment, per segment, or prefixing your values with a currency symbol.
Currently you can only use sub-labels to display calculated percentages.

TL;DR: I want to just display some calculated raw values/data about each funnel stage with sub-labels on segment/stage hover

README file contains references of version 1.3.9 not 1.4.2 which is the current version.

Fixed by : #23

Hi!

I would love the option to set labels like this:

[100000], [50000, 50000], [2000, 1000] etc...

This helps with funnels if you want let's say the total users. And then you want to split it up by demographic, conversion etc.

[total users], [user_invited_by_phone, user_invited_by_mail] as example

I need to draw funnel graph like the below screenshot in React project.
Is there any way?

Currently, selectors only acceptable as a container passed in options. Passing an HTML element produces the error 'Container must either be a selector string or an HTMLElement.'.
It seems like it's a typo here.

Please check out the pull request #21

Are there any callback functions being added to this? Being able to click on a segment and get that event, with data like the position of the segment (1, 2, 3, ...), would be incredibly useful 😮!

Hi greghub,
thanks for building this awesome and beautiful funnel graph library. I am experiencing the issue where either styles are not applied correctly or the SVG funnel is not drawn at all.

I used the CSS/JS files and the code from the example in the Readme. Here is a JS fiddle that shows the issue: https://jsfiddle.net/xyzb95oq/1/

I am using this package with nuxt and I can't find a way for showing decimals for values in the graph, for example if I want to show some percentge for a value: (5.72), it is rounded to 6 and formatted to 0 decimals, did some digging and found that number.js from src/js/number is responsible for formatting the numbers. It would be nice to be able to pass decimal option to values.

for example:
<vue-funnel-graph :values="values" ></vue-funnel-graph>

data(){ return { values: [ [this.statistics.spend],[this.statistics.clicks],[this.statistics.leads],[(this.statistics.leads / this.statistics.clicks * 100), { decimals: 2 }] ] } }

Thanks.

For the following data object, I get an incredibly weird chart:

labels: Array(4)
  0: "One"
  1: "Two"
  2: "Three"
  3: "Four And A Half"
subLabels: Array(4)
  0: "Beauty"
  1: "Health"
  2: "Fashion"
  3: "Other"
values: Array(4)
  0: (4) [30000, 10000, 5000, 5000]
  1: (4) [5000, 5000, 10000, 15000]
  2: (4) [0, 0, 0, 0]
  3: (4) [0, 0, 0, 0]

See screenshot

JSFiddle: https://jsfiddle.net/3mb6vkr5/

Love your library!!!

Would it be possible to add a option to display the percentage based on the last value? Currently it's possible to display the percentage based on the max value, but I'm looking for a way to display the percentage based on the last value.

Example:

• Data: 300, 200, 150, 40
• Current percentages: 100%, 67%, 50%, 13%
• Percentage based on last value: 100%, 67%, 75%, 27%

Thank you

Hi greghub,

Thanks for building this amazing funnel graph library, this really helps in building funnel graphs easily.
I am experiencing the issue while drawing the graph using data from API. I can easily build the graph with static data, issue arises while using dynamic data.
I am writing FunnelGraph code within useEffect, where every time data changes the graph should be re-drawn using updated data. And the graph is re-drawn every time the data changes but it keeps overlapping on the previous graph.
Is there a method to clear previously drawn graph, so it doesn't overlap on the newly drawn graph? All the React examples that I have seen till now use only static data and only draw once.
Please help.

Thanks.

When i use 11186.89, 6101.85 for values, the display of label is:

17,288.739,999,999,998

If i use

11186.83, 6101.85

i get 17,288.68

Once i do

11186.84, 6101.85

17,288.690,000,000,002

Any fix to this aside from using integer/rounding?

Expect: a thin line as shown in last 3 columns of data = [100, 0, 0, 0]
Actual: no line at all

Expect: percentages to be empty
Actual: NaN%

When I call the graph.updateData({data}) function it redraws the funnel but don't update the counter labels and percentage . If i call it twice it updates the count label as well but the percentage is not being updates. if I call graph.data I can still see the init data there and not the new data set by graph.updateData().

Hi,

Thanks for this very good package. I noticed that there is a vue component available for this package; I am wondering if I can use it in a react js application. I really appreciate it if I can use this component in react or if there is any other way to use this package in a react js application?

Thanks

Would it be possible to add this feature?

Add a setting to set legends (subtitles) and Labels separately. One field for each object.

Thanks!

It's working perfectly without defining any width and height.

The goal is to display the graph about 1/3 the original size. Using this code

this._recrutingFunnel = new FunnelGraph({
    container: '#funnel',
    direction: 'vertical',
    gradientDirection: 'vertical',
    height: 133,
    width: 100,
    data: this._data,
    displayPercent: true
})

There's a way to redraw the funnel svg on window resize?

Issue

Having an issue with your funnel graph library where I can have default values as 0, but it logs errors to my console when I draw the graph with those values.

Explanation

The actual functionality of the graph is fine, it displays with no data as it should and shows 0 as all values.
The issue is that it also sends a error for NaN as I suspect that it is trying to draw the graph with no data to work with instead of ignoring the draw entirely.

This quickly becomes bloat in my error-logs when debugging, especially when i'm updating the graph on a timed interval of 5 seconds.

Images

Code:

Error:

Example

Example on how to replicate this issue: (The values are the only important part)
-> The code was meant to serve as a example, may not be runnable

const graph = new FunnelGraph({
  container: ".funnel",
  gradientDirection: "horizontal",
  data: {
    labels: ["X", "Y", "Z"],
    colors: ["#000000", "#000000"],
    values: [0, 0, 0]
  },
  displayPercent: true,
  direction: "horizontal",
  width: 1000,
  height: 100,
  subLabelValue: "raw"
})
  
graph.draw();

When a label is a bit longer, it's printed onto the funnel graph.
Can there be a line break instead?