Closed sggonzalezg closed 2 years ago
@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 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?
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.
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