Skip to content
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

[Bug]: Tooltip Formatter Not Called When value is Falsey #1913

Open
5 of 6 tasks
roccomaniscalco opened this issue Nov 13, 2024 · 0 comments
Open
5 of 6 tasks

[Bug]: Tooltip Formatter Not Called When value is Falsey #1913

roccomaniscalco opened this issue Nov 13, 2024 · 0 comments

Comments

@roccomaniscalco
Copy link

Relevant package(s)

  • @carbon/charts
  • @carbon/charts-svelte
  • @carbon/charts-react
  • @carbon/charts-angular
  • @carbon/charts-vue
  • Documentation website

Carbon Charts Version

1.22.0

Which bundler are you using?

Vite

What happened and what did you expect to happen?

tooltip.valueFormatter is not called when the value argument is falsey. This is an issue when value is 0.

Say we want to add "units" to all y-values in our tooltip:

valueFormatter: (value, label) => {
  if (label === 'y-value') {
    return value + ' units';
  }
}

We will only see "units" added to non-falsey values:

Image

I believe the issue is being caused by this condition:

item.value = item.value ? this.valueFormatter(item.value, item.label) : item.value

Chart data and options (automatically formatted so no need for backticks)

// options
{
  title: 'Vertical simple bar (discrete)',
  axes: {
    left: {
      mapsTo: 'value',
    },
    bottom: {
      mapsTo: 'group',
      scaleType: 'labels',
    },
  },
  height: '400px',
  tooltip: {
    // when value is 0, `valueFormatter` isn't executed
    valueFormatter: (value, label) => {
      if (label === 'y-value') {
        return value + ' units';
      }
    },
  },
};

// data
[
  {
    group: 'Qty',
    value: 0
  },
  {
    group: 'More',
    value: 29123
  },
  {
    group: 'Sold',
    value: 35213
  },
  {
    group: 'Restocking',
    value: 51213
  },
  {
    group: 'Misc',
    value: 16932
  }
]

JavaScript console or build output (if relevant)

StackBlitz repro

https://stackblitz.com/edit/juzzbq?file=options.js,data.js

IBM Application/Team (if relevant)

No response

What priority level would this be in your opinion?

P3 (Low)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant