Totals for stacked bars

[timothyarmes]

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.

[alexiastandish]

@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

[Joelelmiller]

Looking for a work around for this too. Would be a great addition.

[jeffodle]

Anyone find a solution to this?

[alexiastandish]

@Joelelmiller @jeffodle I did but it's pretty hacky...

layers={['grid', 'axes', 'bars', Line, 'markers', 'legends']}

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: if bars.length / 3 <= 14)

[seppu]

Hi @alexiastandish,

Have you tried to do this in typescript? I am getting an error while adding the following line
layers={['grid', 'axes', 'bars', Line, 'markers', 'legends']}

I tried to follow this codepen example

[stale]

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!

[stale]

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!

[Mulli]

This issue is not closed and much needed!

[Kryptesa]

Bump 🥺

[iampueroo]

bump!

[damianr13]

Bump

[ChuckJonas]

can this be reopened?

[harsh3401]

Bump !

[jnsoler12012]

This same question was asked recently too and they gave a pretty good solution

#2020

[elijahnikov]

For anyone trying to do this for <ResponsiveBarCanvas/> this is what helped me
#2020

[plouc]

Implemented in #2525 thanks to @joaopedromatias.