1

I'm trying to use ChartJs in LWC, I took the last 3.3.2 version and followed several examples in order to create my chart (here one of the most complete example I found), but when invoking the instruction:

this.chart = new window.Chart(ctx, config);

I get the error "TypeError: ResizeObserver is not a constructor".

I tried to replace the ChartJs resource with older versions, and I found with the version 2.8.0 the chart is correctly loaded without any error.

Since from documentation is specified the 3.x version introduces several improvements, so I would prefer to use a recent version instead of the 2.8.0. I've tried also to search some info about the ResizeObserver but I didn't understand what is and why I have problems with it. From LWC it seems I haven't to import anything else.

Is there a way to resolve this problem?

zeldez
  • 11
  • 1
  • 2
  • got the same issue some time back, If you are not concerned with the responsiveness of the charts, you can modify the chart.js library to avoid execution of that particular line that uses ResizeObserver. – Jasneet Dua Jul 12 '21 at 05:56
  • If responsiveness is not deal breaker for you then use "options.responsive=false" attribute available in chartjs v3.6.1 has attribute. this is working for me. – Sanjay Kharwar Dec 05 '21 at 11:42

2 Answers2

2

It could be you are attempting to run it in a browser/version combination which does not support ResizeObserver.

You can check this and see if your browser version supports it: https://www.caniuse.com/resizeobserver

If not, you can use a polyfill to add the needed behaviour, such as this one: https://github.com/juggle/resize-observer

Stephan Pieterse
  • 424
  • 3
  • 8
  • For some it may be an option that can be enabled, e.g. on Firefox 68 (used by Mypal 68 on XP/Vista) you can set `layout.css.resizeobserver.enabled` to true in `about:config`. – GreenReaper Sep 07 '22 at 08:18
1

I encountered the same issue with Chart.Js - but fortunately you can turn off responsiveness and implement your own version.

I just posted the below here: https://salesforce.stackexchange.com/questions/379134/how-to-use-loadscript-with-light-dom-in-lwc-getting-error-invariant-violation/383560#383560

createChart() {
    const element = this.querySelector('[data-id="chart"]');
    const config = deepClone(this._chartConfiguration);
    //Ensure that the responsiveness is disabled as ResizeObserver
    //is not supported by the LockerService
    if (!config.options) {
        config.options = {
            responsive: false
        };
    } else {
        config.options.responsive = false;
    }
    this.chartInstance = new Chart(
        element.getContext("2d"),
        config
    );
    this.chartInstance.resize();
}

connectedCallback() {
    try {
        window.addEventListener(
            "resize",
            this.handleWindowResize
        );
    } catch (ex) {
        //Handle this
    }
}

disconnectedCallback() {
    try {
        window.removeEventListener(
            "resize",
            this.handleWindowResize
        );
    } catch (ex) {
        //Handle this
    }
}

handleWindowResize = () => {
    if (this.chartCreated === true) {
        this.chartInstance.resize();
    }
}

Link to Chart.Js docs on responsiveness: https://www.chartjs.org/docs/latest/configuration/responsive.html

Nic Edwards
  • 11
  • 1