-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Totals for stacked bars #951
Comments
@timothyarmes did you ever figure out a workaround for this? Currently I'm using a custom bar component but with that it no longer utilizes the built in tooltip functionality |
Looking for a work around for this too. Would be a great addition. |
Anyone find a solution to this? |
@Joelelmiller @jeffodle I did but it's pretty hacky...
I added a custom Line component and then I used the bar data that is passed to the custom component through nivo to render a custom bar with a element that shows the total of the bar. Custom component below... const Line = ({ bars }) => {
if (bars.length / 3 <= 14) {
const barsList = [];
bars.map((currBar) => {
const key = currBar.key.slice(currBar.key.indexOf(".") + 1);
const keyCheck = barsList.find((element) => element.key === key);
const keyCheckIndex = barsList.findIndex(
(element) => element.key === key
);
if (keyCheck) {
barsList[keyCheckIndex]["bars"].push(currBar.data.id);
} else {
barsList.push({
key: key,
bars: [currBar.data.id],
});
}
});
return (
<Fragment>
{bars.map((bar) => {
const barListKey = barsList.findIndex(
(element) => element.key === bar.key.slice(bar.key.indexOf(".") + 1)
);
const lastBarInGroup =
barsList[barListKey].bars[barsList[barListKey].bars.length - 1];
if (bar.data.id === lastBarInGroup) {
return (
<svg
key={bar.key}
style={{
overflow: "visible",
}}
>
<g>
{" "}
<rect
x={bar.x}
y={bar.y - 20}
width={bar.width}
height="14px"
fill="transparent"
/>{" "}
<text
x={bar.x + bar.width / 2}
y={bar.y + 25 / 2 - 20}
style={{
fontSize: "12px",
textAlign: "center",
}}
dominantBaseline="middle"
textAnchor="middle"
>
{useNumberFormat(
bar.data.data.deeplink +
bar.data.data.direct +
bar.data.data.push
)}
</text>
</g>
</svg>
);
}
})}
</Fragment>
);
} else {
return <div />;
}
}; Like I said it's not a great and would love to see a cleaner solution. There's also some niche, random config in their specific to the graph I was building that can be ignored (ex: |
Hi @alexiastandish, Have you tried to do this in typescript? I am getting an error while adding the following line I tried to follow this codepen example |
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment! |
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you! |
This issue is not closed and much needed! |
Bump 🥺 |
bump! |
Bump |
can this be reopened? |
Bump ! |
This same question was asked recently too and they gave a pretty good solution |
For anyone trying to do this for |
Implemented in #2525 thanks to @joaopedromatias. |
It would be really useful to show the total at the top of each bar so that we can show a sales breakdown by category along with total earnings.
The text was updated successfully, but these errors were encountered: