Skip to content

v3 Gaps in stacked bar chart when object based data point removed #8614

Description

@sdehm

Expected Behavior

When a data point is removed the other stacked bars should drop to fill the gap.

Current Behavior

When a data point, specified in Object[] format is removed the bars that were above do not drop to fill the gap.

Possible Solution

I have tested the following workarounds:

  • When deleting a data point just set it's value to zero (better appearance/animation but more complicated code)
  • When updating data in a dataset replace the whole dataset (reanimates entire dataset which is not always desirable)

Steps to Reproduce

Create a stacked bar chart with data in Objects[] format and then delete some data points.
Example codepen derived from sample stacked bar chart:
https://codepen.io/scdehmlow/pen/BaQvowb

Context

I am unable to provide a smooth animation experience for changing chart data without more complicated logic that sets deleted values to zero.

Environment

  • Chart.js version: 3.0.0-beta.13
  • Browser name and version: Chrome 88.0.4324.190
  • Link to your project:

Metadata

Metadata

Assignees

No one assigned

    Labels

    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