Hello Philip

Thank you for reaching out to us.

The wpDataChart callbacks shouldn't be added in the Settings/Custom JS and CSS section, but instead on the page where the chart is.

Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom JS to the page, please take a look at this article.

You would need to add individual JS for each chart.

Hi again Philip

You need to add one callback below the other in JS, you can't use one callback for multiple charts out-of-the-box.

There can be workarounds, but we haven't tested everything yet.  We plan to add solutions in the future, I can't say an ETA though.

For the time being, I can only offer you some examples with custom solutions, I hope they can help.

We have these hooks available :

wpdatatables_filter_google_charts_render_data wpdatatables_filter_highcharts_render_data wpdatatables_filter_chartjs_render_data wpdatatables_filter_apexcharts_render_data

-

This is a custom solution, so we can only give you an example.

This was used to move the "Reset zoom" button of a HighChart, from the right side to the left side of the chart;

We have first used this script only on the page with the chart, i will first show how we did it for one chart on the page :

We place this script text on the same page where your graph is;

we used Gutenberg editor, and used a custom HTML block for it to work-

here is the script text :

<script type="text/javascript">
jQuery(window).on('load', function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[3] = function(obj){
        obj.options.chart.resetZoomButton = {
            position: {
                align: 'left'
            }
        };
    }
});
</script>

( change the ID in square brackets to your chart ID, at the  ' wpDataChartsCallbacks[ ]  ' part. )

Now, I will show you a custom workaround our developers used to apply this to all the charts.

A solution that should work for all the HighCharts on the plugin; then you wouldn't have to use the callback on the page anymore.

For this to work, you have to edit the code in a couple of PHP files.

- The first one is in the path:  wp-content/plugins/wpdatatables/source/class.wpdatachart.php

Around line 2211, you will find this :

$this->_highcharts_render_data['options']['credits']['text'] = $this->getCreditsText();

underneath that, add this hook :

$this->_highcharts_render_data = apply_filters('wpdatatables_filter_highcharts_render_data', $this->_highcharts_render_data, $this->getId(), $this);

and then, in the functions file of your theme, or child theme; insert this :

add_filter( 'wpdatatables_filter_highcharts_render_data', 'updateHighchartsRenderData', 10, 3 );
function updateHighchartsRenderData ($highcharts_render_data, $chartID, $chart_object){
    $highcharts_render_data['options']['chart']['resetZoomButton']['position']['align'] = 'left';
    return $highcharts_render_data;
}

- This way, it will be applied to all the HighCharts. You can remove that first callback that we gave you if this is implemented correctly.

- This hook takes three parameters:

The first one is the HighCharts render data which is an array with all the options,

the second one is "chart ID", in case you need it for only some specific charts;

and the last one is the chart object.