feat(Bar): add bar totals

[joaopedromatias]

This adds a totals layer to the bar chart component.

The goal is to provide the total value for each index of the chart.

In order to activate it, users have to add the layers prop having the totals value to the BarSvg or BarCanvas component, like following:

export const WithTotals = {
    return (
        <Bar
            {...props}
            layers={['grid', 'axes', 'bars', 'markers', 'legends', 'annotations', 'totals']}
        />
}

The issues #951 and #2020 are related to this feature.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nivo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2024 1:55am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 999ba05:

Sandbox	Source
nivo	Configuration

[plouc]

Thank you for this, should be very useful as it's been requested quite often!

[plouc]

LGTM, just a small comment about keeping the value along with the formattedValue, good job! I tried the feature in the vercel preview, and it's really nice! I think we could allow the customization of the component (later).

[Maxim278]

@plouc is there an information about when this change is going to be released?

[dbuhon]

It works now on v0.86.0 with:

<ResponsiveBar 
  enableTotals
  layers={['bars', 'totals', ...]}
  ...
/>

[plouc]

It works now on v0.86.0 with:

<ResponsiveBar 
  enableTotals
  layers={['bars', 'totals', ...]}
  ...
/>

Please note that you don't need to specify the layers as the totals layer is included by default, unless you want to change their order or add a custom layer.