Half funnel

[sggonzalezg]

Is your feature request related to a problem? Please describe. I am using nivo/funnel to include a component on my application. Is there a way to make a half horizontal funnel

How can I use customTooltip with a custom Part? like the image

[ezrafree]

@sggonzalezg I actually just did this recently, here's how I created the custom part labels: https://github.com/plouc/nivo/issues/2096

And as far as the CSS I ended up wrapping the <Funnel> component in a <div class="half-funnel"></div> tag along with the following styles:

.half-funnel,
.half-funnel > div,
.half-funnel > div > div {
  height: 450px !important;
  overflow-y: hidden;
}
.half-funnel svg {
  height: 100% !important;
  overflow: hidden;
}
.half-funnel svg g {
  background-color: yellow;
}
.half-funnel svg g text {
  margin-bottom: 3rem;
}

This method requires knowing the height, so maybe won't work for your needs, but it could be a starting point at least hopefully.

[sggonzalezg]

@sggonzalezg I actually just did this recently, here's how I created the custom part labels: #2096

And as far as the CSS I ended up wrapping the <Funnel> component in a <div class="half-funnel"></div> tag along with the following styles:

.half-funnel,
.half-funnel > div,
.half-funnel > div > div {
  height: 450px !important;
  overflow-y: hidden;
}
.half-funnel svg {
  height: 100% !important;
  overflow: hidden;
}
.half-funnel svg g {
  background-color: yellow;
}
.half-funnel svg g text {
  margin-bottom: 3rem;
}

This method requires knowing the height, so maybe won't work for your needs, but it could be a starting point at least hopefully.

This method masks the funnel, it does not split it in half. Does the library support half funnel?

[plouc]

The library doesn't support a half funnel, that being said you might be able to achieve something a bit similar by using a line chart or a stream with annotations or custom layers to have the separations.