Chart.js: Problem with other plugin

[iLenTheme]

Hi, for any reason within the WordPress Admin this plugin has comflicto with the plugin
Iris
Just in the line of Iris plugin sends the following error
(intermediate value).setHSpace is not a function

[panzarino]

Please include an example of your issue on a website such as JS Bin, JS Fiddle, or Codepen. (Template). If this seems more like an issue with Iris then you might want to report it there.

[etimberg]

I don't think this is a chart.js problem. Sounds like something is potentially using Chart.js and causing an issue. The issue should be reported to the plugin maintainers.

[etimberg]

Closing since we don't have any way to reproduce this

[sgreer81]

I have run into the same issue. This time with a WordPress page builder called Beaver Builder. They use the Iris color picker for Automatic and it seems to conflict with Chart.js. Attached is a screen shoot of my console error. I'm not really sure how to add the entire site to a codepen to test the issue.

[simonbrunel]

That's not obvious who is to blame: this conflict comes from the use of different color libraries (Color.js vs our fork of color) under the same global alias (Color.js & chartjs-color). Maybe we could use a different alias (e.g. Chart.Color) and so considerably reduce name collision probability:

var Color = {
   // ...
}

if (typeof window !== 'undefined') {
    window.Chart = window.Chart || {};
    window.Chart.Color = Color;

    if (typeof window.Color === 'undefined') {
       // maintain backward compatibility ONLY if no other Color lib has been defined
       window.Color = Color;
    }
}

[sgreer81]

@simonbrunel This works! That you for looking into this and sharing!

[ozthegreat]

Hey, I've just run into this issue. Can confirm the fix seems to solve it, is it likely to get merged? thanks

[tareq1988]

Got into this problem as well.

@simonbrunel What do you suggest as a fix? If Chart.js contains the fix you mentioned above, that would be great to have.

[lkhedlund]

Same issue for me with Beaver Builder on a Wordpress install. For anyone else with this problem, here's my fix:

1. Download Chart js from releases (full, not minified): https://github.com/chartjs/Chart.js/releases/
2. Open the file and search for window.Color.
3. Replace this code with what @simonbrunel posted above.

if (typeof window !== 'undefined') {
    window.Color = Color;
}

// is replaced with

if (typeof window !== 'undefined') {
    window.Chart = window.Chart || {};
    window.Chart.Color = Color;

    if (typeof window.Color === 'undefined') {
       // maintain backward compatibility ONLY if no other Color lib has been defined
       window.Color = Color;
    }
}

After you do that, you can minify and include the file however you'd like. In my case, I ended up dropping the NPM build and just adding the file I created in a require. Not the best solution, but it was that or remove Chart.js for another library :/.

Hope this helps @tareq1988!

[ozthegreat]

Yeah we ended up manually patching. Annoying as means we can't update. A fix in core would great

[tareq1988]

@lkhedlund I'm aware of manual patch that @simonbrunel provided, which helps. But unless it ends-up in the Chart.js core, it would be a hideous process to patch each time it's released. As we tend to forget things after few days, we could accidentally create bugs.

[deivian]

This was of great help. Thanks @lkhedlund

[rassemdev]

I'm getting the same error, possible conflict with divi theme. can anyone help me out! when i disable divi theme, its working just fine. But enabling divi theme is generating the error. Stuck here for 2 months :(