Skip to content

[Bug]: BarChart: changing type prop via ternary leaves stacked100 in broken state (wrong axis scale, single color) #3299

Description

@francky-fr

Describe the bug

When toggling type between stacked and stacked100 using a ternary prop (as recommended by the Evidence best practices doc), the stacked100 mode renders incorrectly: the Y axis displays raw values (in millions) instead of 0–100%, and all series collapse to a single color. The correct way to work around this is to use {#if}/{:else} blocks, which forces a full component remount.

Steps to Reproduce

  1. Create a BarChart with stacked type and a series prop
  2. Add a toggle (ButtonGroup or Dropdown) to switch between
    "stacked" and "stacked100"
  3. Use a ternary to change the type prop:
    type={inputs.mode === 'pct' ? 'stacked100' : 'stacked'}
  4. Switch to "stacked100" mode

Minimal reproducible example : See attached md

bug.md

Logs

System Info

Severity

annoyance

Additional Information, or Workarounds

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingto-reviewEvidence team to review

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions