Hi again Brett.

Which callback are you using, and what is it supposed to do?

To add custom JS or CSS to a page, you need to add it in HTML mode, with corresponding tags, so <script>...</script> for JS and <style>...</style>. If you're using a builder, and it has corresponding Custom CSS field, you need to add it there, without the tags.

For example - in Elementor wpDataTables widget, a piece of custom code would be added like this:

For JS there are probably Custom JS settings in Elementor.

Brett, charts have nothing to do with CSS, only with JS, so there's nothing we need to update in our documentation.

The image I shared with you in my last response was an example of a Custom CSS field, which exists in Elementor; implying that there probably is a similar field for custom JS. I don't know, as I don't use Elementor, and I don't provide support for Elementor. I ran into it, and have worked with it, but even when I work with it, I'm not using it to add custom code.

Also, this part of the code you're using is deprecated:

jQuery(window).load(function(){

You need to use:

jQuery(window).on('load',function(){

The callback you copied from that FAQ section is for Charts.js, and you can't use the same callback for Highcharts. That's why it works for Charts.js, and not for Highcharts, but if it works for Charts.js, you've found a proper way to add it to the page.

They are loaded differently for every engine, and you need to check Google Charts API, Highcharts API and Chart.js API. 

All necessary resources are available in charts engines API (depends on which one you use). Again - Every engine has a different approach to chart settings. In wpDataChart callbacks you have to adopt those settings to the wpDataChart object. Huge number of examples for any area of programming can be found on stackoverflow.com and jsffidle.net.

Using hooks or wpdatatable and wpDataChart callbacks requires certain level of programming skills and included support refers only to advice.

I don't know when you copied that code, or if you visited that page a few days back and didn't delete cache, but the code has been corrected so the deprecated line was changed.

Bar charts color can be changed per series, but since you need to change it per bar - you will need a complicated callback for that.

Also, the code you copied is from this page (you referenced it yourself):

Charts.js - not Highcharts; so the documentation is fine.

You simply changed the chart ID, and reduced the number of colors you've changed.

If you don't have programming skills required for using wpDataChart callbacks, and you can't figure out how to apply them from our examples in the documentation and FAQ section, you will need to reach to a 3rd party which can create a callback for you, for a fee. We don't have the time to accept any custom work, otherwise we would've already offered our services to you.

We can recommend these services for customization:

https://codeable.io/?ref=l1TW1

https://wpkraken.io/?tms-plugins

They do develop such solutions, so you can send your inquiry to them.

I'm sorry that you don't like my answers Brett, but I'm trying to tell you that you're either using the callbacks in the way they're not supposed to be used, or that you have some mistakes in them. Our documentation is not there to provide tutorials for callbacks, as they require some coding knowledge in order to use them; and our examples are there only as suggestions. I cannot help you by creating a callback for you since that is not included in the provided support for the plugin.

For example, on that page, the first callback is this:

In code:

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[37] = function(obj){
    obj.options.data.datasets[0].backgroundColor = [
                                                        '#CD9C42',
                                                        '#083172',
            ];
}
});
</script>
[wpdatachart id=37]

1. You're still loading the function with a deprecated call "jQuery(window).load(function(){" instead of "jQuery(window).on('load',function(){".

2. You added a semi-colon after the angle bracket;

3. "obj.options.data.datasets[0].backgroundColor" is copied from our FAQ section where the callback changes the background color of a pie chart, not an area chart. They are not the same, and you can't use a callback for one chart type on another chart type.

You have a couple of errors on that page which are not related to wpDataTables:

SyntaxError: Unexpected token ':'
 /?elementor_library=new&preview_id=6168&preview_nonce=109ae11225&preview=true:1758
Uncaught SyntaxError: Unexpected token '}'
 /waitlist_update_call.js:50

If I correct your callback (remove semi-colon and replace the call), point 3 is confirmed by an error in the console:

wpDataTables is a WYSIWYG (What You See Is What You Get) concept based plugin. This means that tables and charts should look the same both in back-end and in front-end. If your back-end chart looks good when you pass the color, it should look the same in front-end. Since it's not, there's something overriding that on your website. Maybe it's the theme, maybe another plugin; I don't know - the only way to inspect what's overwriting colors you set in wpDataChart's wizard is to turn off other plugins, and change the theme, and see if they work fine after that. If the colors are fine, then start enabling one plugin at a time, and refresh your page after each activation. When the issue is back - you will see which plugin causes the color to change on front-end.

The second callback just uses the deprecated function call, but even when that's changed - it's still not displayed on the page. The chart isn't being displayed on the page even if the callback is removed, so that's definitely got something to do with a conflict on with something else on your page.

If we forget about callbacks for now and focus on back-end vs front-end appearance of your charts, there's something changing them. You would first need to inspect that, and after that we can get back to callbacks.

Can you please change the theme and see if the issue is resolved? If not, then please deactivate all other plugins except for our plugin, refresh the page where the issue is, and see if it is resolved (it should be). If it is, then start activating other plugins one by one, and after each activation refresh the page to see if the issue reoccurred. Once it does reoccur, you will have found the plugin causing the issue.

Hi again Brett.

I see you changed the role of the user you provided for me, so I can't see anything related to wpDataTables or charts anymore.

The screenshots and links I provided, from our documentation, all have updated code. I don't know when you copied them, but I told you 6 days ago they're deprecated, and the code has been changed on our documentation and FAQ section. Do you still see the old code somewhere on our website?

All callback examples you see on our documentation and in the FAQ section are live charts, not screenshots, and they all have the callbacks you see there. So, examples are there, working fine with callbacks. It is noted in our documentation, and I told you that a few times already, that using callbacks requires a certain level of programming skills. It's not something I like telling customers, but at the moment that's how it is - default behavior of chart engines can only be changed with callbacks, and providing custom callbacks isn't included in the provided support for the plugin.

Thanks for troubleshooting the plugin by disabling other plugins, but did you change the theme? Also, do charts show correct colors in back-end, in the wizard? If the color is correct in back-end, then there's something overriding that style in front-end. Like mentioned before - wpDataTables is a WYSIWYG (What You See Is What You Get) concept based plugin. This means that tables and charts should look the same both in back-end and in front-end.

Unfortunately, issues like conflicts with third party plugins or themes are always possible due to the nature of WordPress, and it might take significant time to investigate and replicate the issue on our side, to be able to find the source of the problem, especially when the plugin or theme is not familiar to us. 

You have shown me that the red text color doesn't apply to front-end. How about back-end; in the wizard? If it's applying the correct color in back-end, something's overwriting that. Elementor (doubt that) or the theme, since everything else is disabled.

Can you clone your website?

If yes - I'll ask you to install the Duplicator plugin. It will generate a couple of files which you can send me (along with the log-in credentials), and then I can create an exact copy of your website, see what the issue is and try to resolve it.

Please note that the files will be too large to attach to the ticket, so you can upload them via wetransfer.com and just send me the link.

Also, note that this is a public ticket, so enable the PRIVATE response if you're sending us the duplicator files.