Skip to content

Changes to resize events and animation in 4.5.1 #12143

Closed

Description

@joshkel

Expected behavior

As a result of #12097, using Chart.js with a fractional width or height (due to specific HTML layouts, a fractional zoom, etc.) may trigger extra resize and update events on render. This is a potential behavior change and performance regression, and it has a more noticeable visual effect: the animation on initial render is lost due to the extra re-renders.

Current behavior

See above.

Reproducible sample

https://codepen.io/joshkel/pen/azdjLGZ

Optional extra steps/info to reproduce

Compare the initial render animation and the browser's console log output between 4.5.0 and 4.5.1.

Possible solution

No response

Context

See #12097 (comment) for discussion.

chart.js version

4.5.1

Browser name and version

No response

Link to your project

No response

Activity

  1. kk-adi commented on Oct 31, 2025

    @kk-adi

    Hi @joshkel
    I face an issue after updating from 4.5.0 to 4.5.1 and it's only a problem with zoom levels different than 100% so I believe it's related to the issue you reported.
    The extra resize triggers re-renders, which crashes my app when using chartjs-plugin-datalabels.

    hook.js:608 React Router caught the following error during render TypeError: Cannot read properties of undefined (reading 'length')
        at Object.draw (chartjs-plugin-datalabels.esm.js:1003:31)
        at Object.afterDatasetsDraw (chartjs-plugin-datalabels.esm.js:1302:12)
        at callback (helpers.core.ts:109:15)
        at PluginService._notify (core.plugins.js:65:11)
        at PluginService.notify (core.plugins.js:46:25)
        at Chart.notifyPlugins (core.controller.js:1130:26)
        at Chart._drawDatasets (core.controller.js:775:10)
        at Chart.draw (core.controller.js:724:10)
        at Chart.render (core.controller.js:693:12)
        at Chart._resize (core.controller.js:299:14)
    

    For the unknown reasons, _labels is undefined (only with zoom != 100%).

      afterDatasetsDraw: function(chart) {
        layout.draw(chart, chart[EXPANDO_KEY]._labels);
      },
    
  2. joshkel commented on Oct 31, 2025

    @joshkel
    ContributorAuthor

    @kk-adi Thanks for the info. If you're able to test #12142, to see if that fixes it, that may be helpful. Or, if you're able to share a reproducible example at https://codepen.io/leelenaleee/pen/WNyJXEe or similar, I can test it out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions