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

Setting resizeDelay to non-zero value gives "Cannot read properties of undefined (reading 'left')" on clipArea error #909

Open
edwardmjackson opened this issue Sep 19, 2023 · 4 comments
Labels

Comments

@edwardmjackson
Copy link

Using [email protected] and [email protected], an error is generated "Cannot read properties of undefined (reading 'left') on clipArea" when the resizeDelay option is set to non-zero.

JSFiddle: here (or just copy and paste this into a new fiddle)

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [1, 2, 3, 4, 5, 6],
      
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },      
      resizeDelay: 100,
      annotation: {
        annotations: {
          box1: {
            // Indicates the type of annotation
            type: 'box',
            xMin: 1,
            xMax: 2,
            yMin: 8,
            yMax: 10,
            backgroundColor: 'rgba(255, 99, 132, 0.25)'
          }
        }
      }
    }
  });
</script>

If you comment and uncomment line 28, resizeDelay: 100, the JSFiddle shows "script error" appear when resizeDelay is set.

The error appears to be in the Draw function

function draw(chart, caller, clip) {
const {ctx, chartArea} = chart;
const state = chartStates.get(chart);
if (clip) {
clipArea(ctx, chartArea);
}
const drawableElements = getDrawableElements(state.visibleElements, caller).sort((a, b) => a.element.options.z - b.element.options.z);
for (const item of drawableElements) {
drawElement(ctx, chartArea, state, item);
}
if (clip) {
unclipArea(ctx);
}
}

Where clipArea(ctx, chartArea) is called but chartArea is not yet defined, hence the chart.js helper at
https://github.com/chartjs/Chart.js/blob/master/src/helpers/helpers.canvas.ts#L327
fails.

My guess at a possible solution could be to only draw if ctx and chartArea are defined?

alternatively, it may be one for the maintainers of chartJS to fix for all users of plugin helprs. It only seems to affect chartjs-plugin-annotation however, not other plugins we're currently using such as chartjs-plugin-zoom

@stockiNail
Copy link
Collaborator

@edwardmjackson thank you for issue. I have tried your code both in JSFiddle and Codepen but I don't have any issue, both enabling and disabling resizeDelay.

You can see my codepen https://codepen.io/stockinail/pen/YzdELbx.
Anyway I see that the box annotation looks like to be configured in the wrong place, in chart options. The annotation plugin options must be located in the "plugins" node of chart options.

If I have done something wrong for reproducing your issue, let me know.

@edwardmjackson
Copy link
Author

This is very curious. I reproduced at work, which is using Chrome. At home, Firefox (at least v 117.0.1) doesn't have the same issue though. The Chrome build is Version 116.0.5845.188 (64-bit) on Windows.

Hopefully this ScreenToGif works to show what I'm seeing.
Animation

@stockiNail
Copy link
Collaborator

uhmm... It's really weird. I have tried with Chrome Version 117.0.5938.88 (Official Build) (and before with FF 117.0.1) and no issue doing the same things you showed me in the img.
Let me take time (I'm very busy on other stuff in this period) to try reproducing the issue.

@stockiNail
Copy link
Collaborator

I was able to reproduce it. JSFiddle + Chrome. With FF works and on Codepen works on both browser.
Anyway, let me report here the exception:

Uncaught TypeError: Cannot read properties of undefined (reading 'left')
    at Object.Ie [as clipArea] (chart.js@4.4.0:19:18340)
    at Jt (chartjs-plugin-annotation@3.0.1:7:33797)
    at Object.beforeDraw (chartjs-plugin-annotation@3.0.1:7:33031)
    at d (chart.js@4.4.0:13:1113)
    at sn._notify (chart.js@4.4.0:19:82974)
    at sn.notify (chart.js@4.4.0:19:82795)
    at An.notifyPlugins (chart.js@4.4.0:19:101789)
    at An.draw (chart.js@4.4.0:19:97016)
    at An.render (chart.js@4.4.0:19:96791)
    at An._resize (chart.js@4.4.0:19:91846)

@stockiNail stockiNail added the bug label Sep 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants